Установите минимальный максимум HighChart yAxis только для определенной серии

У меня есть серия свечей цен на акции и серия линий, которые разделяют ось y с серией свечей. По умолчанию API автоматически устанавливает диапазон yAxis диаграммы на минимум/максимум минимума/максимума двух серий (серии свечей, серии линий).

Но я хочу показать серию свечей важнее, чем линейный график. Таким образом, yAxis min/max графика должен быть ограничен только серией свечей, даже если он обрезает серию линий.

И yAxis min/max должен быть скорректирован, когда диаграмма прокручивается динамически.

Как я могу это сделать?

простой код jsfiddle

var chartData = [
  [1473687000000, 102.65, 105.72, 102.53, 105.44],
  [1473773400000, 107.51, 108.79, 107.24, 107.95],
  [1473859800000, 108.73, 113.03,  108.6, 111.77],
  [1473946200000, 113.86, 115.73, 113.49, 115.57]
];
    
var avgData = [
  [1473687000000, 250],
  [1473773400000, 300],
  [1473859800000, 280],
  [1473946200000, 290]
];

$(function() {
  Highcharts.stockChart('container', {
    // title: {text: '---'},
    rangeSelector: {
      buttons: [
        // { type: 'hour', count: 1, text: '1h' },
        { type: 'day', count: 1, text: '1d' },
        // { type: 'all', count: 1, text: 'All' }
      ],
      selected: 1,
      //inputEnabled: true
    },
    xAxis: [{
      type: 'datetime',
    
    }],
    yAxis: [{
      labels: {
        align: 'right',
        x: -3
      },
      title: {text: 'OHLC'},
      height: '100%',
      lineWidth: 2,
      resize: {
        enabled: true
      }
    }], 

    plotOptions: {
      candlestick: {
        downColor: 'blue',
        upColor: 'red',
        dataGrouping: {
          enabled: false,
        }
      }
    },

    series: [{
      name: 'ohlc',
      type: 'candlestick',
      data: chartData,
    }, {
      name: 'avg',
      type: 'line',
      data: avgData,
    }]
  });
});
dic#container {height: 100%; width: 100%;}
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="//code.highcharts.com/stock/highstock.js"></script>
<script src="//code.highcharts.com/stock/modules/drag-panes.js"></script>
<script src="//code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container"></div>


javascript highcharts candlestick-chart
person amplet7    schedule 09.09.2018    source источник
comment
не могли бы вы добавить рассматриваемый скрипт вместе с небольшими примерами данных?   -  person Martin Zeitler    schedule 09.09.2018
comment
@MartinZeitler Я добавил ссылку jsfiddle и упростил данные.   -  person amplet7    schedule 09.09.2018

Ответы (1)


arrow_upward
1
arrow_downward

В событии afterDrawChartBox вы можете использовать метод setExtremes с минимальными и максимальными значениями из серии candlestick:

Highcharts.addEvent(Highcharts.Chart, 'afterDrawChartBox', function(e) {
    var candlestick = this.series[0];
    this.yAxis[0].setExtremes(candlestick.dataMin, candlestick.dataMax, true, false);
});

Демонстрация в реальном времени: https://jsfiddle.net/BlackLabel/520km1wv/

Справочник по API: https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes

person ppotaczek    schedule 10.09.2018