高图表 - 将自定义信息添加到工具提示中，导致价格上涨或价格下降的原因

Question

我正在制作图表，需要将信息添加到每个点标记的工具提示弹出框中。例如，我有一个图表，其中 Y：价格 X：日期。

如果产品的价格因某些事件(例如地震(而上涨，我想在有人将鼠标指向该特定图表点时显示该信息。这在 wpdatatables 或 highcharts 中可能吗？

我是一名网页设计师，正在寻找一些编码帮助。提前感谢您的帮助。

此致敬意 凯文

尝试在 jsfiddle 中查找此选项，并且 https://jsfiddle.net/Kaige/huo1vyzs/2/https://cloud.highcharts.com/edit/249857

Highcharts.chart('container', {
title: {
text: 'Pricing chart'
},
subtitle: {
text: 'Price information'
},
yAxis: {
title: {
text: 'Vitamin pricing'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2010
}
},
series: [{
name: 'Vitamin A',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: 'Vitamin B',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
name: 'Vitamin C',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
name: 'Vitamin D',
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
name: 'Other',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});

#container {
	min-width: 310px;
	max-width: 800px;
	height: 400px;
	margin: 0 auto
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container"></div>

Answer 1

您可以向数据添加一些其他属性，通过keys选项映射它，最后通过自定义pointFormat在工具提示中显示它：

series: [{
keys: ['x', 'y', 'event'],
data: [
[1, 2, 'event1'],
[2, 3, 'event2'],
[3, 4]
]
}],
tooltip: {
pointFormat: '<span style="color:{point.color}">u25CF</span> {series.name}: <b>{point.y}</b> {point.event} <br/>'
}

现场演示：https://jsfiddle.net/BlackLabel/acugvkqh/

接口参考：

https://api.highcharts.com/highcharts/tooltip.pointFormat

https://api.highcharts.com/highcharts/series.line.keys