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

1

Я пытаюсь выяснить, как влиять на классы подсвечников highcharts-point-down и highcharts-point-up. На моем снимке экрана вы видите, что свечи, которые четыре значения (открытые, высокие, низкие, близкие) равны, получили класс highcharts-point-down который был красным в моем случае.

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

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

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

Теги:
highcharts

1 ответ

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>

Единственное изменение, внесенное в исходную функцию, изменяется < to be <=.

Пример 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/

Поделиться
  • 0
    Спасибо, вот и все! Был бы способ достичь того же результата, не зацикливая все точки серии и не заменяя классы?
  • 0
    @Pad Я добавил, как выполнить перенос функции и рабочий пример. Это был бы самый эффективный способ достичь того, чего вы хотите.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню