Highstock: как изменить цвет в области, когда ряды пересекают sma

Question

Доброе утро, ребята, Мне нужна ваша помощь для решения проблемы, которую я не могу решить. Мне нужно выделить пересечения между простым рядом данных и соответствующей скользящей средней. Данные скользящего среднего автоматически генерируются HighStock и не рассчитываются мной (иначе я бы почти решил проблему!).

Если невозможно графически выделить разными цветами каждый раз, когда ряд находится выше или ниже скользящей средней Я хотел бы рассчитать разницу между двумя сериями (таким образом я мог бы нарисовать одну линию вокруг нулевого значения с отрицательными значениями красного цвета и значениями зеленого цвета, например, положительными).

После многочисленных исследований я еще не решил свою проблему. Должен сказать, что документация HighChart / HighStock очень полная, но в основном для профессионалов. Спасибо за вашу помощь!

Это то, что мне нужно (посмотрите на картинку)

    $('#container').highcharts('StockChart', {

    title: { text: 'Relative Strenght' },
    navigator: { enabled: false },
    series: [
        {
            id: 'forza-rel',
            type: 'spline',
            name: 'Rel. Str.',
            data: forza_relativa,
        }, 
        {
            name: 'M.A. 5',
            type: 'sma',
            linkedTo: 'forza-rel',
            color:'#FF0000',
            dashStyle: 'line',
            marker: { enabled: false },
            params: { period: 5 }
        }
    ]
});

Answer 1

Мне нужно выделить пересечения между простым рядом данных и соответствующее скользящее среднее.

Это может быть сделано, однако, это требует много пользовательского кода, и это немного сложно.

Я хотел бы рассчитать разницу между двумя сериями

Это можно сделать легко. SMA - это просто еще одна серия, поэтому вы должны просмотреть данные серии SMA и провести различие между их данными и данными базовой серии. Чем использовать метод series.setData () для обновления третьей серии вычисленными значениями (например, Площади).

HTML:

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/indicators/indicators.js"></script>

<div id="container" style="height: 400px; min-width: 310px"></div>

JS:

Highcharts.stockChart('container', {

  chart: {
    height: 500,
    events: {
      load: function() {
        var chart = this,
          series = chart.series,
          data = [],
          offset,
          diff,
          i;

        offset = series[0].xData.length - series[1].xData.length;

        for (i = 0; i < series[1].xData.length; i++) {
          diff = series[0].yData[i + offset] - series[1].yData[i];
          data.push({
            x: series[1].xData[i],
            y: diff
          });
        }

        chart.series[2].setData(data);
      }
    }
  },

  rangeSelector: {
    selected: 0
  },

  title: {
    text: 'AAPL Stock Price'
  },

  legend: {
    enabled: true
  },

  plotOptions: {
    series: {
      showInLegend: true
    }
  },

  yAxis: [{
    height: '60%',
    top: '0%',
    id: '0'
  }, {
    height: '36%',
    top: '62%',
    id: '1'
  }],

  series: [{
    type: 'spline',
    id: 'aapl',
    name: 'AAPL Stock Price',
    data: data,
    yAxis: '0'
  }, {
    type: 'sma',
    linkedTo: 'aapl',
    marker: {
      enabled: false
    },
    yAxis: '0'
  }, {
    type: 'areaspline',
    yAxis: '1',
    color: 'green',
    negativeColor: 'red',
    data: []
  }]
});

Демо-версия: https://jsfiddle.net/wchmiel/863n241h/3/