javascript - 从 HIGHCHART 中删除零

标签 javascript highcharts

我一直在研究 Highcharts 只是遇到了一个麻烦问题是当图表上的某些数据不存在任何值时它会显示 0 这看起来很糟糕请检查以下 jsfiddle 图表上的标签得到由以下函数填充,但我无法检查它是否应该只显示图表上那些值大于零的柱

http://jsfiddle.net/CzHyC/3/ [请检查图表上的苹果部分]

$(function () {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'column'
            },
            title: {
                text: 'Stacked column chart'
            },
            xAxis: {
                categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Total fruit consumption'
                },
                stackLabels: {
                    enabled: true,
                    style: {
                        fontWeight: 'bold',
                        color: (Highcharts.theme && Highcharts.theme.textColor) || 'blue'
                    }
                }
            },
            legend: {
                align: 'right',
                x: -100,
                verticalAlign: 'top',
                y: 20,
                floating: true,
                backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'gray',
                borderColor: '#CCC',
                borderWidth: 1,
                shadow: false
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.x +'</b><br/>'+
                        this.series.name +': '+ this.y +'<br/>'+
                        'Total: '+ this.point.stackTotal;
                }
            },
            plotOptions: {
                column: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: true,
                        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
                    }
                }
            },
            series: [{
                name: 'John',
                data: [0, 3, 4, 7, 2]
            }, {
                name: 'Jane',
                data: [2, 2, 3, 2, 1]
            }, {
                name: 'Joe',
                data: [3, 4, 4, 2, 5]
            }]
        });
    });

});

最佳答案

这是我处理这种情况的方式。

当您创建数据点时,不要输入 0,而是输入 null。

例如,您的数据数组将如下所示:

[null,3,4,7,2] 而不是 [0,3,4,7,2]

Fiddle

关于javascript - 从 HIGHCHART 中删除零,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11402047/

相关文章:

javascript - 替换 javascript 数组中的字符串

javascript - HighCharts Pattern-fill 带实线的对 Angular 线图案

javascript - 如何将 Highcharts 事件回调(click、mouseOver、mouseOut)中的值传回 React 组件成员函数?

javascript - React,setInterval 无法正常工作,h1 元素未正确更新

javascript - 向后台发送数据

javascript - 使用 css3 : opacity transition 处理移动设备上的 "Rasterize Paint"延迟

php - HighCharts - 使用 MySQL 和 PHP 制作饼图

javascript - Highstock不同时间值区间

javascript - 带平均线的 HighChart 箱线图

javascript - 使用 Angular $resource 自动保存