高级图表更新分组系列数据点颜色

Question

我有一个类似于这里的烛台和音量图，但是在音量条和烛台上有自定义的颜色。这是很好的工作，直到图形被重新绘制或分组，因为新的数据被添加或范围选择器按钮按下。当图形被重新绘制或分组时，蜡烛色和卷条颜色似乎都没有正确地传递。我正在使用下面的重绘函数，但它似乎没有任何效果。奇怪的是，每次将数据分组在一个新的数据分组中时，卷条将在悬停在它们上时显示正确的颜色，并将保持正确的颜色直到重新绘制图形。这里是显示这种情况的小提琴。我的重绘功能在下面。

编辑:如果小提琴产生了500个错误，请尝试这里

有什么方法可以解决这个问题，或者让我正确地绘制颜色吗？

const redraw = (event) => {

 const chartTarget = event.target;

  if (chartTarget.series[0].hasGroupedData) {

    // Get all the candlesticks that are shown
    const candlesticks = chartTarget.series[0].points;

    // Get all the volume bards that are shown
    const volumeBars = chartTarget.series[1].points;

    // Go through the candle chart and volume points and update the colors
    for (let i = 0; i < candlesticks.length; i++) {
      const candle = candlesticks[i];
      const volumeBar = volumeBars[i];

      if (candle.close > candle.open) {
        const color = 'green';
        volumeBar.color = color;
        candle.color = color;
      } else if (candle.close < candle.open) {
        const color = 'red';
        candle.color = color;
        volumeBar.color = color;
      }
    }
  }
};

Answer 1

整个周末我都在忙着解决同样的问题。我一点也不是海图专家，但我想出的是这个。它的灵感来自于这个问题和这个问题。

http://jsfiddle.net/b7cm8zum/

小提琴的相关部分是：

    Highcharts.stockChart('container', {
  chart: {
    events: {
      load: function(event) {
        // Get the volume series by id.
        var volSeries = this.series.find(function(s) {
          return s.userOptions.id === 'volume';
        });
        // Override the pointAttribs function on the volume series.
        volSeries.pointAttribs = (function(original) {
          return function(point, state) {
            // Call the original pointAttribs function.
            var attribs = original.apply(this, arguments);

            // Get the price series using the id.
            var priceSeries = point.series.chart.series.find(function(s) {
              return s.userOptions.id === 'price';
            });

            // Find the candle corresponding to the current volume point.
            var candle;
            if (point.series.hasGroupedData) {
              // With grouped data, we need to find the candle from the grouped data.
              var datagroup = point.dataGroup;
              var groupIdx = point.series.groupMap.indexOf(datagroup);

              candle = priceSeries.groupedData[groupIdx];
            } else {
              // Non-grouped data, we can just use the normal data.
              candle = priceSeries.data[point.index];
            }

            // Choose the color for the volume point based on the candle properties.
            var color = 'blue';
            if (candle.close > candle.open) {
              color = 'green';
            } else if (candle.close < candle.open) {
              color = 'red';
            }
            // Set the volume point's attribute(s) accordingly.
            attribs.fill = color;
            // Return the updated attributes.
            return attribs;
          };
        })(volSeries.pointAttribs);
        // Need to call update so the changes get taken into account on first draw.
        this.update({});
      }
    }
  },
...

基本上，我们覆盖卷系列上的pointAttribs函数，这样我们就可以进行颜色计算。pointAttribs函数是一个内部函数，因此使用它需要您自己承担风险。

就性能而言，这不应该太昂贵--对于非分组数据，它使用的是预先存在的索引；对于分组数据，则必须在series.groupMap上使用series.groupMap来获取索引。

卷系列的颜色是用标准的烛台期权 -“颜色”和"upColor“设置的，还有"lineColor”和"upLineColor“选项。

Answer 2

如果您使用本文中的解决方案：高级图表更新分组数据点颜色，一切似乎都很好。

    const color = 'green';
    volumeBar.graphic.css({
      color: color
    });

    candle.graphic.css({
      color: color
    });

现场演示： http://jsfiddle.net/BlackLabel/w7nv82r2/