Как вы поместите метки оси x вдоль линии y = 0 с помощью Highcharts?

Question

Я пытаюсь переместить метки оси x так, чтобы они отображались вдоль линии x = 0. Масштабы постоянно меняются, поэтому я не хочу устанавливать местоположение с помощью пикселей, так как y = 0 не может находиться в одном месте для каждого графика.

Я попытался найти этот вопрос на этом сайте, и кто-то рекомендовал использовать «cross: 0», как показано ниже, но это не работает.

xAxis: { 
    min: -20, 
    max: 20, 
    tickInterval: 1, 
    gridLineWidth: 1, 
    endOnTick: false, 
    crossing:0, 
    title: { 
     text: 'some value', 
    }, 

Если кто-то может помочь мне с этим позиционированием, я был бы признателен.

Вот мой JsFiddle: http://jsfiddle.net/z7eyv/35/

Answer 1

crossing не является особенностью вне коробки из Highcharts.

Основываясь на том, что я мог бы найти, кажется, что вы хотите, это "Crossing-Specific-Value" Highcharts плагин, который расположен здесь: http://www.highcharts.com/plugin-registry/single/6/Crossing-Specific-Values

Update (5 июля 2016): Для решения комментарии о вашей скрипке, вы должны явно добавить «Crossing-Specific-Value» плагин после того, как ваши принести в библиотеке Highcharts (см третьей строчки ниже):

<script src="https://code.highcharts.com/highcharts.js"></script> 
<script src="http://code.highcharts.com/modules/exporting.js"></script> 
<script src="https://rawgithub.com/highslide-software/crossing-specific-value/master/crossing-specific-value.js"></script> 

Теперь, добавив переменную crossing к вашему ось x покажет ярлыки, как в демо.

Я сделал несколько настроек вашей скрипке (см. http://jsfiddle.net/brightmatrix/z7eyv/38/), чтобы лучше подойти к тому, что вы просите.

1) Используя демонстрационную версию по умолчанию, кажется, что плагин помещает ваши метки над осью. Я видел случаи, когда метки лучше готовы ниже линии, так что я сделал следующее:

xAxis: { 
    crossing: 0, 
    opposite: true, 
    min: -20, 
    max: 20, 
    tickInterval: 1, 
    gridLineWidth: 1, 
    endOnTick: false, 
    title: { text: '' }, 
    labels: { y: 15 }  // pushes the labels down below the crossing line 
    }, 

2) Затем я настроил участок линии для оси Y. следующим образом:

yAxis: { 
    min: -20, 
    max: 20, 
    tickInterval: 1, 
    endOnTick: false, 
    title: { text: 'some value' }, 
    plotLines: [{ 
     value: 0.1, 
     width: 1, 
     color: 'black', 
     zIndex: 10 }]  // moves the plot line above the axis gridline 
    }, 

Значение zIndex означает, что линия будет отображаться поверх нормальной линии сетки. Вот как это выглядит:

Пожалуйста, дайте мне знать, если это лучше отвечает на ваш вопрос.