Как повлиять на классы подсвечивания и расцветки свечей

Question

Я пытаюсь выяснить, как повлиять на классы свечей highcharts-point-down и highcharts-point-up. На моем скриншоте вы можете видеть, что свечи, четыре значения которых (open, high, low, close) равны, получили класс highcharts-point-down, который в моем случае красный.

Вот небольшой пример Пример кода Первые три свечи красные и имеют класс highcharts-point-down, но цена не изменилась (максимум, открытие, минимум, закрытие 113)

Что я хочу, так это чтобы те свечи, четыре значения которых были равны (первые три в моем примере), получили класс highcharts-point-up. Таким образом, они кажутся зелеными, а не красными.

Есть ли способ достичь этого?

Answer 1

Это может быть решено несколькими способами, вот два способа достижения того, что вы хотите:

Наиболее эффективным способом является непосредственное изменение поведения функции, определяющей класс. Это делается с помощью обертывания функции , которая определяет класс , например:

(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/