javascript - 使 highchart 堆积柱形图计数为零

Question

我有一个 highchart 堆积柱形图，显示各个部门的正返回、零返回和负返回。但我面临一个奇怪的问题，因为我有三个系列，如果我的系列值计数小于 3，图表显示错误信息，我不知道可能是什么原因。例如，在我的代码中，请注意黄麻、纸张和打印以及电信部门的值(value)；这些值的总和小于 3，但每个值都有 3 个值，并且图表显示错误信息。如果你把光标放在你会注意到，而且你还会看到堆叠也是错误的。在这里 fiddle :http://jsfiddle.net/Snowbell92/KtrZz/ 。检查最后一个部门“电信”。它的正值为 2，但是当我从图例中转到正值时，电信仍然会得到一个包含两个的列，只是颜色为红色。该值根本没有更新。我的 Highcharts JavaScript 如下:

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column',
            height: 400
        },
        title: {
            text: 'Todays Sector Up/Down Ratio' 
        },
        xAxis: {
            categories: ['Bank', 'Engineering', 'Food & Allied', 'Fuel & Power', 'Jute','Textile','Pharmaceuticals','Paper & Printing','Serv. & R. Estate', 'Cement','Miscellaneous','Insurance','NBFI','IT Sector','Travel & Leisure','Ceramics','Mutual Funds','Tannery','Telecom'],
            labels: {
                rotation: -45,
                align: 'right',
                style: {
                    fontSize: '10px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }

        },
        yAxis: {
            min: 0,
            labels:
        {
        enabled: false
    },
            title: {
                text: ''
            },
            stackLabels: {
                enabled: true,
        style: {
                        fontWeight: 'bold',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                }
            }
        },
        legend: {
            align: 'left',
            x: 20,
            verticalAlign: 'top',
            y: 20,
            floating: true,
            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
            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: {
             series: {
            minPointLength:15,
            borderColor: '#f2f2f2',
            borderWidth: 2,
            shadow: true
        },
            column: {
                stacking: 'normal',
                 pointPadding: 0.1,
                 dataLabels: {
                    enabled: false,
                    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                    verticalAlign: 'top'

                }

            }

        },
        credits: {
    enabled: false
  },
        series: [{
            name: 'Positive Return',
            data: [15, 20, 14, 7, 1, 20,15,1,2,5,4,20,15,2,2,3,35,2,2],
            color: '#008000',
        }, {
            name: '0 Return',
            data: [5, 2, 2, 3, 1, 9,8,0,1,1,3,5,5,2,0,1,5,3,0],
            color: '#1F497D',
        }, {
            name: 'Negetive Return',
            data: [10, 5, 1 , 5, 1, 3,2,0,1,1,2,21,3,2,1,1,3,0,0],
            color: '#F40909',
        }]
    });
});

感谢任何帮助。提前致谢。

Answer 1

如果您询问为什么图表显示列(即使值为零)，那是因为 minPointLeght在 plotOptions 中设置:

plotOptions: {
    series: {
        minPointLength:15,  //get rid of the minPointLength setting and you will be fine
        borderColor: '#f2f2f2',
        borderWidth: 2,
        shadow: true
    },

我更新了你的jsfiddle:http://jsfiddle.net/KtrZz/1/