Highcharts更新分组的系列数据点颜色 [英] Highcharts Update Grouped Series Data Point Colors

问题描述

我有一个类似于此处的烛台和体积图，但具有用于音量条和烛台的自定义颜色.由于添加了新数据或按下范围选择器按钮，在重新绘制图形或对图形进行分组之前，此方法均能正常工作.重新绘制图形或对图形进行分组时，蜡烛色和音量条颜色似乎都无法正确传递.我正在使用以下重绘功能，但它似乎没有任何作用.奇怪的是，每次将数据分组到一个新的数据分组中时，将音量栏悬停在其上时，它们将显示正确的颜色，并且将保持正确的颜色，直到重新绘制图形为止. 此处是显示这种情况的小提琴.我的重绘功能如下.

I have a candlestick and volume chart similar to here, but with custom colors for the volume bars and candlesticks. This works fine until the graph is redrawn or grouped due to new data being added or a range selector button press. When the graph is redrawn or grouped, neither the candle color nor the volume bar color seems to be transferring properly. I'm using the following redraw function, but it does not seem to be having any effect. Strangely, each time the data is grouped in a new data grouping, the volume bars will display the correct color when you hover over them, and will stay the correct color until the graph is redrawn. Here is the fiddle showing this condition. My redraw function is below.

如果小提琴出现500错误，请尝试在此处

If the fiddle is giving a 500 error, try here

有什么办法可以解决这个问题或得到它，以便我可以正确地绘制颜色?

Is there any way to fix this or get it so I can draw the colors correctly?

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;
      }
    }
  }
};

推荐答案

整个周末，我一直在努力解决同一个问题.我根本不是专家，但是这是我想出的.此问题和此问题.

I've been banging my head on the same problem all weekend. I'm not at all a highcharts expert, but here's what I came up with. It was inspired by this question and this question.

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函数是内部函数，因此使用风险自负.

Basically, we override the pointAttribs function on the volume series so that we can do the color calculation. The pointAttribs function is an internal function, so use at your own risk.

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

Performance wise, this shouldn't be too expensive - for non-grouped data it's using pre-existing indexes; for grouped data it has to use indexOf on the series.groupMap to get the index.

使用标准的烛台选项-颜色"和"upColor"，还有"lineColor"和"upLineColor"选项.

The volume series colors are set with standard candlestick options - "color" and "upColor", there's also "lineColor" and "upLineColor" options available.

这篇关于Highcharts更新分组的系列数据点颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！