Question

我希望在Highcharts柱形图上将YAxis值置于零，并带有正数＆amp;像这样的负值：https://drive.google.com/open?id=0B_IZwAPijvleZzBhUnVaSFhBcDQ，这些轴值是动态加载的。使用jqPlot，在轴设置上有一个名为forceTickAt0的选项，可以满足我的要求，我想知道Highcharts是否可行，如果是的话怎么办？感谢。

更新好的，为了清楚地解释我的问题，我创建了一个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: ' $'
       }
     }]
   });
});

Answer 1

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

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

这将使中心点为0，根据您的数据，您可以动态地将最大值设置为最小值的绝对值。

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

1 个答案: