使高图堆积柱形图计数零值

时间:2014-01-06 16:45:18

标签: javascript jquery highcharts

我有一个高图堆积柱形图,显示各个扇区的正,零和负回报。但我面临一个奇怪的问题,因为我有三个系列,如果我有一个小于3的系列值,图表显示错误的信息,我不是什么原因。例如,在我的代码中请注意黄麻,纸和&印刷和电信部门的价值;这些值的总和小于3,但每个值有3个值,图表显示错误的信息。如果您放置光标,您会注意到,并且您也会看到堆叠也是错误的。在这里小提琴:http://jsfiddle.net/Snowbell92/KtrZz/。检查最后一个部门“电信”。它的正值为2,但是当我从图例中转出正值时,电信仍会得到一个两列,只有红色。该值根本没有得到更新。我的javascript for highchart下面:

$(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',
        }]
    });
});

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

1 个答案:

答案 0 :(得分:3)

如果你问为什么你的图表显示列甚至值为零,那是因为plotOptions中的minPointLeght设置:

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/