На верхнем графике значение Yaxis в центре столбца

Я хочу центрировать значение YAxis на нуле на диаграмме столбца Highcharts с положительными и отрицательными значениями, такими как https://drive.google.com/open?id=0B_IZwAPijvleZzBhUnVaSFhBcDQ, эти значения оси загружаются динамически. С jqPlot есть опция forceTickAt0 в настройках оси, которая может удовлетворить мои требования, я хотел бы знать, возможно ли это с Highcharts, если да, то как это сделать? Благодарю.

Обновление: Хорошо, чтобы четко объяснить мой вопрос, я создал jsFiddle. Как вы видите на графике, значение серии max/min на оси Y составляет 5001/-4280, но Highcharts показывает 15000/-5000 на границе оси Y, и я ожидаю, что оно будет 6000/-5000, и если вы удалите первое значение 5001 из ряда по оси Y, Highcharts покажет 5000 / -5000 на границе по оси Y, что я и ожидал. Таким образом, добавление значения 5001 к оси Y приводит к тому, что граница оси 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 ответ

Я не верю, что существует forceiTickAt0, но эту функциональность легко реализовать, установив мин / макс оси y. Например:

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

Это будет иметь центральную точку на 0, и в зависимости от ваших данных вы можете динамически установить максимальную абсолютную величину минимума.

Другие вопросы по тегам