Highcharts更新分组系列数据点颜色

我有一个类似于的烛台和音量表，但音量条和烛台有自定义颜色。在由于添加新数据或按下范围选择器按钮而重新绘制或分组图形之前，此操作正常。重新绘制或分组图形时，蜡烛颜色和音量栏颜色似乎都没有正确传输。我正在使用下面的重画函数，但它似乎没有任何效果。奇怪的是，每次将数据分组到新的数据分组中时，当您将鼠标悬停在卷栏上时，卷栏将显示正确的颜色，并将保持正确的颜色，直到重新绘制图形为止。小提琴显示了这种情况。下面是我的重画函数

编辑：如果小提琴发出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;
      }
    }
  }
};

const redraw=（事件）=>{
const chartTarget=event.target；
if（chartTarget.series[0].hasGroupedData）{
//获取所有显示的烛台
常量烛台=chartTarget.series[0]。点；
//获取显示的所有音量
const volumeBars=chartTarget.series[1]。点；
//浏览蜡烛图和音量点，并更新颜色
for（设i=0；i蜡烛打开）{
常量颜色='绿色'；
volumeBar.color=颜色；
蜡烛颜色=颜色；
}否则如果（蜡烛关闭<蜡烛打开）{
常量颜色='红色'；
蜡烛颜色=颜色；
volumeBar.color=颜色；
}
}
}
};

整个周末我都在为同一个问题绞尽脑汁。我一点也不是高图专家，但我想到的是。它的灵感来自于这个和这个

小提琴的相关部分是：

    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({});
      }
    }
  },
...

Highcharts.stockChart（'container'）{
图表：{
活动：{
加载：函数（事件）{
//按id获取卷系列。
var volSeries=this.series.find（函数）{
返回s.userOptions.id=='volume'；
});
//重写卷系列上的pointAttribs函数。
volSeries.pointAttribs=（函数（原始）{
返回函数（点、状态）{
//调用原始的pointAttribs函数。
var attribs=original.apply（这是参数）；
//使用id获取价格序列。
var priceSeries=point.series.chart.series.find（函数）{
返回s.userOptions.id=='price'；
});
//找到与当前体积点对应的蜡烛。
var蜡烛；
if（point.series.hasGroupedData）{
//对于分组数据，我们需要从分组数据中找到蜡烛。
var datagroup=point.datagroup；
var groupIdx=point.series.groupMap.indexOf（数据组）；
candle=priceSeries.groupedData[groupIdx]；
}否则{
//非分组数据，我们只能使用普通数据。
蜡烛=价格系列数据[点指数]；
}
//根据蜡烛属性选择体积点的颜色。
var color='蓝色'；
如果（蜡烛关闭>蜡烛打开）{
颜色='绿色'；
}否则如果（蜡烛关闭<蜡烛打开）{
颜色=红色；
}
//相应地设置体积点的属性。
attribs.fill=颜色；
//返回更新的属性。
返回属性；
};
})（volSeries.pointAttribs）；
//需要调用update，以便在第一次绘制时考虑更改。
更新（{}）；
}
}
},
...

基本上，我们覆盖了卷系列上的，以便我们可以进行颜色计算。pointAttribs函数是一个内部函数，因此使用时风险自负

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

---

volume系列的颜色设置为标准的“color”和“upColor”，还有“lineColor”和“upLineColor”选项可用。

整个周末我都在为同一个问题绞尽脑汁。我根本不是highcharts专家，但以下是我的想法。我的灵感来源于此

小提琴的相关部分是：

    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({});
      }
    }
  },
...

Highcharts.stockChart（'container'）{
图表：{
活动：{
加载：函数（事件）{
//按id获取卷系列。
var volSeries=this.series.find（函数）{
返回s.userOptions.id=='volume'；
});
//重写卷系列上的pointAttribs函数。
volSeries.pointAttribs=（函数（原始）{
返回函数（点、状态）{
//调用原始的pointAttribs函数。
var attribs=original.apply（这是参数）；
//使用id获取价格序列。
var priceSeries=point.series.chart.series.find（函数）{
返回s.userOptions.id=='price'；
});
//找到与当前体积点对应的蜡烛。
var蜡烛；
if（point.series.hasGroupedData）{
//对于分组数据，我们需要从分组数据中找到蜡烛。
var datagroup=point.datagroup；
var groupIdx=point.series.groupMap.indexOf（数据组）；
candle=priceSeries.groupedData[groupIdx]；
}否则{
//非分组数据，我们只能使用普通数据。
蜡烛=价格系列数据[点指数]；
}
//根据蜡烛选择体积点的颜色