首页 文章

柱形图上的Highcharts中心yaxis值为零

提问于
浏览
-2

我想在Highcharts柱形图上将YAxis值置于零,正负值如下:https://drive.google.com/open?id=0B_IZwAPijvleZzBhUnVaSFhBcDQ,这些轴值是动态加载的 . 使用jqPlot,在轴设置上有一个名为forceTickAt0的选项可以满足我的要求,我想知道这是否可以使用Highcharts,如果是的话怎么办?谢谢 .

Update: 好的,为了清楚地解释我的问题,我创建了一个jsFiddle . 如图所示,y轴的最大/最小系列值为5001 / -4280,但Highcharts在y轴边界显示为15000 / -5000,我预计为6000 / -5000,如果删除来自y轴系列的第一个值5001,Highcharts将在y轴边界显示5000 / -5000,这正是我的预期 . 因此,在y轴系列上添加5001值会导致y轴边界变得太远 .

关键是我不希望y轴上的最大/最小系列值远离图表最大/最小边界值 .

以下是代码,为了便于说明,此处的系列数据使用固定值,在实际情况下,它们都是动态加载的 .

$(function() {
   $('#container').highcharts({
     chart: {
       zoomType: 'xy',
       plotBackgroundColor: '#fffdf6',
       alignTicks: true,
     },
     title: {
       text: 'Country Illegally Building Num Average Tax',
     },
     subtitle: {
       text: ''
     },
     xAxis: [{
       categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N'],
       crosshair: true,
       title: {
         text: 'Country Code',
       }
     }],
     yAxis: [{ // Primary yAxis
       labels: {
         format: '{value} ',
       },
       title: {
         text: 'Illegally Building Num',
       },

     }, { // Secondary yAxis
       min: 0, //Required to start at zero
       title: {
         text: 'Average Tax ($)',
         style: {
           color: '#666'
         }
       },
       labels: {
         format: '{value} $',
         style: {
           color: '#666'
         }
       },
       opposite: true
     }],
     tooltip: {
       shared: true
     },
     legend: {
       enabled: false
     },
     series: [{
       color: 'red',
       negativeColor: 'green',
       name: 'Illegally Building Num',
       type: 'column',
       data: [5001, 369, 475, 891, 3585, 4235, -1711, -3648, -3749, -2555, -4280, -1017, 2001, -900],
       tooltip: {
         valueSuffix: ' '
       }
     }, {
       name: 'Average Tax',
       type: 'line',
       data: [140.5, 141, 139.5, 162, 151, 142, 147, 151, 154, 142, 146, 149, 153, 111.5],
       yAxis: 1,
       tooltip: {
         valueSuffix: ' $'
       }
     }]
   });
});

1 回答

  • 1

    我不相信有一个forceiTickAt0,但是通过设置y轴的最小值/最大值可以很容易地实现这个功能 . 例如:

    yAxis: {
                min:-20,
                max:20,
                title: {
                    text: 'Axis Title'
                },
                labels: {
                    formatter: function () {
                        return this.value + '°';
                    }
                },
                lineWidth: 2
            },
    

    这将使中心点为0,并且根据您的数据,您可以动态地将max设置为min的绝对值 .

相关问题