更改蜡烛颜色反应 Highcharts - Javascript

在 Highcharts 的蜡烛图（Candlestick chart）中，我们可以通过一些条件来对蜡烛的颜色进行自定义。在这篇文章中，我们将学习如何在 Highcharts 中通过 Javascript 的方法来更改蜡烛的颜色。

步骤

1. 引入 Highcharts 库

在 HTML 文件中，我们需要引入 Highcharts 库，用于绘制蜡烛图。

<script src="https://code.highcharts.com/highcharts.js"></script>

2. 定义数据

在 Javascript 中，我们需要定义蜡烛图的数据。这里我们使用随机数据进行演示。

const data = [
	[1546300800000, 26.55, 26.95, 26.45, 26.75],
	[1546387200000, 26.85, 26.95, 26.55, 26.75],
	[1546473600000, 26.8, 27.1, 26.5, 26.8],
	[1546560000000, 26.9, 27, 26.5, 26.75],
	[1546819200000, 26.6, 26.9, 26.5, 26.75],
	[1546905600000, 26.8, 27, 26.7, 26.95],
	[1546992000000, 26.95, 27.05, 26.75, 26.85],
	[1547078400000, 26.85, 27, 26.8, 27],
	[1547164800000, 27, 27.05, 26.6, 26.65],
	[1547424000000, 26.85, 27.1, 26.75, 27],
	[1547510400000, 27, 27.1, 26.9, 27],
	[1547596800000, 26.95, 27.05, 26.75, 26.9],
	[1547683200000, 26.95, 27.05, 26.8, 27],
	[1547769600000, 27, 27.1, 26.75, 27.1],
	[1548028800000, 27.1, 27.35, 27, 27.2],
	[1548115200000, 27.15, 27.25, 26.9, 27],
	[1548201600000, 27, 27.1, 26.95, 27.05],
	[1548288000000, 27.05, 27.1, 26.55, 26.75],
	[1548374400000, 26.75, 26.8, 26.45, 26.7],
	[1548633600000, 26.9, 27, 26.65, 26.8]
];

3. 定义蜡烛图的配置项

在 Highcharts 中，我们可以通过 plotOptions.candlestick 的配置项来定义蜡烛图的样式。这里我们先定义一个基础的配置项，并设置蜡烛图的宽度和颜色。

const options = {
    chart: {
        type: 'candlestick'
    },
    plotOptions: {
        candlestick: {
            color: 'green',
            upColor: 'red',
            lineWidth: 1
        }
    },
    series: [{
        data: data
    }]
};

其中，plotOptions.candlestick.color 定义了蜡烛的颜色；plotOptions.candlestick.upColor 定义了上涨时的蜡烛颜色。同时，我们也可以通过 plotOptions.candlestick.lineWidth 来定义蜡烛的粗细程度。

4. 创建 Highcharts 图表

在执行完以上配置后，我们就可以通过 Highcharts 的 Highcharts.chart 方法来创建蜡烛图了。

Highcharts.chart('container', options);

其中，'container' 表示蜡烛图容器的 ID，对应 HTML 中的一个 div 元素。

5. 更改蜡烛颜色

在默认情况下，Highcharts 会根据每个数据点的涨跌情况来自动计算蜡烛的颜色。如果需要自定义蜡烛颜色，我们需要通过 point.update 方法来更改每个数据点的颜色信息。

options.series[0].data.forEach((point) => {
	if (point[1] < point[4]) {
		point.color = 'green';
		point.fillColor = 'red';
	} else {
		point.color = 'red';
		point.fillColor = 'green';
	}
	point.update(point);
});

在这个例子中，我们通过循环遍历每个数据点，并对比它的开盘价和收盘价，来判断其当前的涨跌情况。如果开盘价低于收盘价，我们则认为是上涨，将蜡烛颜色设置为绿色，否则认为是下跌，将蜡烛颜色设置为红色。

需要注意的是，由于 Highcharts 的内部实现机制，我们需要调用 point.update 方法来使更改生效。

结论

在本文中，我们通过 Javascript 来操作 Highcharts 的蜡烛图，并自定义了蜡烛的颜色信息。虽然 Highcharts 已经提供了一些默认设置来计算蜡烛颜色，但通过自定义，我们可以更好地呈现我们需要展示的数据信息。