如何更改HighCharts工具顶以显示更多细节

Question

我需要帮助调整下面Highchart示例的工具提示，以显示"Vacation Used: On Jan 4, 2020。2名员工总共使用了8个小时。">

示例:http://jsfiddle.net/sha7gwz5/5/

数据如下:

DATE,MONTH,HOURS,EMPLOYEE COUNT
2020-01-31,01,11,2
2020-02-14,02,14.25,1
2020-02-28,02,7,2
2020-03-13,03,7,1
2020-03-27,03,35.5,3
2020-04-10,04,3,1
2020-04-24,04,3,1
2020-05-08,05,8.75,2
2020-05-22,05,7,2
2020-05-29,05,8,1
2020-06-05,06,7.25,2
2020-06-19,06,83,4
2020-06-30,06,64,2
2020-07-03,07,184,5
2020-07-15,07,48,1
2020-07-17,07,62,5
2020-07-31,07,23.82,2
2020-08-14,08,3,1
2020-08-28,08,11,2
2020-09-11,09,11,2
2020-10-09,10,40,1
2020-12-04,12,16,1
2020-12-18,12,47.25,1
2021-01-04,01,9.5,1

任何想法吗?

Answer 1

您可以将数据创建为对象数组，并在tooltip.formatter函数中使用附加属性:

$.each(data, function(i, point) {
...
chartData.push({
x,
y,
value: val,
date: row[0],
hours: parseInt(row[2]),
count: parseInt(row[3])
});
});

$(function() {
$('#container').highcharts({
tooltip: {
formatter: function() {
var point = this.point,
date = new Date(point.date);
return `Vacation Used: On ${Highcharts.dateFormat('%b %e, %Y', date.getTime())}. Total is ${point.hours} hours used by ${point.count} employees.`;
}
},
...
});
});

---

现场演示:http://jsfiddle.net/BlackLabel/k3vwz62j/

API参考:

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

https://api.highcharts.com/class-reference/Highcharts .dateFormat