Question

我正在尝试找出如何影响烛台类highcharts-point-down和highcharts-point-up。在我的屏幕快照中，您可以看到四个值（开盘价，高价，低价，收盘价）相等的蜡烛，已应用了highcharts-point-down类，在我的情况下为红色。

这是一个小例子Code Example 前三个蜡烛是红色的，并且应用了highcharts-point-down类，但是价格没有变化（（高，开盘，低，收盘价为113）

我想要的是四个值相等的蜡烛（在我的示例中为前三个）获得highcharts-point-up类。因此它们显示为绿色而不是红色。

有什么办法可以做到这一点？

Answer 1

这可以通过多种方式解决，这是实现您所追求的两种方式：

最有效的方法是直接更改决定类的函数的行为。这是由wrapping function that decides on the class完成的，就像这样：

(function(H) {
  H.wrap(H.seriesTypes.ohlc.prototype.pointClass.prototype, 'getClassName', function(proceed) {
    return H.Point.prototype.getClassName.call(this) +
      (
        this.open <= this.close ?
        ' highcharts-point-up' :
        ' highcharts-point-down'
      );
  });
}(Highcharts));

(function(H) {
  H.wrap(H.seriesTypes.ohlc.prototype.pointClass.prototype, 'getClassName', function(proceed) {
    return H.Point.prototype.getClassName.call(this) +
      (
        this.open <= this.close ?
        ' highcharts-point-up' :
        ' highcharts-point-down'
      );
  });
}(Highcharts));

const data = [
  [
    1477920600000,
    113,
    113,
    113,
    113
  ],
  [
    1478007000000,
    113,
    113,
    113,
    113
  ],
  [
    1478093400000,
    113,
    113,
    113,
    113
  ],
  [
    1478179800000,
    110.98,
    111.46,
    109.55,
    109.83
  ],
  [
    1478266200000,
    108.53,
    110.25,
    108.11,
    108.84
  ],
  [
    1478529000000,
    110.08,
    110.51,
    109.46,
    110.41
  ],
  [
    1478615400000,
    110.31,
    111.72,
    109.7,
    111.06
  ],
  [
    1478701800000,
    109.88,
    111.32,
    108.05,
    110.88
  ],
  [
    1478788200000,
    111.09,
    111.09,
    105.83,
    107.79
  ],
  [
    1478874600000,
    107.12,
    108.87,
    106.55,
    108.43
  ],
  [
    1479133800000,
    107.71,
    107.81,
    104.08,
    105.71
  ],
  [
    1479220200000,
    106.57,
    107.68,
    106.16,
    107.11
  ],
]
// create the chart
Highcharts.stockChart('container', {
  rangeSelector: {
    selected: 1
  },

  title: {
    text: 'AAPL Stock Price'
  },

  series: [{
    type: 'candlestick',
    name: 'AAPL Stock Price',
    data: data,
  }]
});

.highcharts-point-down {
  fill: red;
  stroke: red;
}

.highcharts-point-up {
  stroke: green;
}

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>

<div id="container" style="height: 400px; min-width: 310px"></div>

对原始功能所做的唯一更改就是将<更改为<=。

JSFiddle示例： http://jsfiddle.net/ewolden/519myrc2/6/

获得所需内容的另一种方法是在渲染时更新类：

添加一个render event，该类replaces是open == close上所有点的类。像这样：

chart: {
  events: {
    render: function() {
      let points = this.series[0].points;
      for(let i = 0; i < points.length; i++) {
        if(points[i].open == points[i].close) {
          points[i].graphic.element.classList.replace('highcharts-point-down','highcharts-point-up')
        }
      }
    }
  }
},

const data = [
[
1477920600000,
113,
113,
113,
113
],
[
1478007000000,
113,
113,
113,
113
],
[
1478093400000,
113,
113,
113,
113
],
[
1478179800000,
110.98,
111.46,
109.55,
109.83
],
[
1478266200000,
108.53,
110.25,
108.11,
108.84
],
[
1478529000000,
110.08,
110.51,
109.46,
110.41
],
[
1478615400000,
110.31,
111.72,
109.7,
111.06
],
[
1478701800000,
109.88,
111.32,
108.05,
110.88
],
[
1478788200000,
111.09,
111.09,
105.83,
107.79
],
[
1478874600000,
107.12,
108.87,
106.55,
108.43
],
[
1479133800000,
107.71,
107.81,
104.08,
105.71
],
[
1479220200000,
106.57,
107.68,
106.16,
107.11
],]
    // create the chart
    Highcharts.stockChart('container', {
				chart: {
        	events: {
          	render: function() {
            	let points = this.series[0].points;
              
            	for(let i = 0; i < points.length; i++) {
              	if(points[i].open == points[i].close) {
                	points[i].graphic.element.classList.replace('highcharts-point-down','highcharts-point-up')
                }
              }
            }
          }
        },

        rangeSelector: {
            selected: 1
        },

        title: {
            text: 'AAPL Stock Price'
        },

        series: [{
            type: 'candlestick',
            name: 'AAPL Stock Price',
            data: data,
        }]
    });

.highcharts-point-down {
  fill: red;
  stroke: red;
}

.highcharts-point-up {
  stroke: green;
}

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>

<div id="container" style="height: 400px; min-width: 310px"></div>

JSFiddle示例： http://jsfiddle.net/ewolden/jtwosgcz/14/

如何影响烛台上色/下色类

1 个答案: