highcharts - 更改 HighCharts 中交易量列(高/低)的颜色

Question

我有一个简单的图表显示烛台下方带有交易量列:http://jsfiddle.net/T83Xy/

基本上，我想根据它的收盘价是否高于开盘价，对列使用黑色和红色。我已经通过将 Y: data, color: '#000000' 作为参数来查看了一些示例。问题是我正在推送日期和卷号。我试图推送 X: date, Y: data, color: '#000000' 但它抛出错误并且没有给我预期的结果。

Answer 1

首先需要设置series.turboThreshold如果您有大量积分，则为 0。这将禁用输入数据格式检查。

然后，要根据蜡烛应用列颜色，我建议您使用这段代码:

Highcharts.seriesTypes.column.prototype.pointAttribs = (function(func) {
    return function(point, state) {
      var attribs = func.apply(this, arguments);
      
      var candleSeries = this.chart.series[0]; // Probably you'll need to change the index
      var candlePoint = candleSeries.points.filter(function(p) { return p.index == point.index; })[0];

      var color = (candlePoint.open < candlePoint.close) ? '#FF0000' : '#000000'; // Replace with your colors
      attribs.fill = state == 'hover' ? Highcharts.Color(color).brighten(0.3).get() : color;
      
      return attribs;
    };
}(Highcharts.seriesTypes.column.prototype.pointAttribs));

请小心，因为此代码会影响当前页面上的所有图表。但是您可以轻松添加一些条件以仅在特定图表上运行此操作。 Here是带有上述代码的默认 Highstock 演示。