Question

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

编辑：如果小提琴出现500错误，请尝试here

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

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

我整个周末都在为同样的问题敲打头。我根本不是一位高级专家，但这就是我想出的。它的灵感来自于这个question和question。

http://jsfiddle.net/b7cm8zum/

小提琴的相关部分是：

var content = '';

for(var i = 0 ; i < 4 ; i++){
    content += 
    '<div class="parent">' +
       '<div class="firstChild"></div>' +
       '<div class="secondChild"></div>' +
   '</div>';
}

$('.conainer').html(content);

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

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

音量系列颜色设置为标准candlestick options - ＆＃34;颜色＆＃34;和＆＃34; upColor＆＃34;，还有＆＃34; lineColor＆＃34;和＆＃34; upLineColor＆＃34;可用的选项。

Answer 2

如果您使用此帖子中的解决方案，一切似乎都可以正常运行：Highcharts update grouped data point color

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

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

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

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

2 个答案: