如何更改HighCharts tooltop以显示更多详细信息

如何更改HighCharts tooltop以显示更多详细信息,highcharts,Highcharts,我需要帮助调整以下Highchart示例的工具提示,以显示“已使用的假期:2020年1月4日。2名员工总共使用了8小时。” 例如: 数据如下所示: 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

我需要帮助调整以下Highchart示例的工具提示,以显示“已使用的假期:2020年1月4日。2名员工总共使用了8小时。”

例如:

数据如下所示:

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

有什么想法吗?

您可以将数据创建为对象数组,并在工具提示中使用其他属性。格式化程序功能:

$.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.`;
            }
        },
        ...
    });
});

现场演示:

API参考:


你搞定了。这正是我想要的。非常感谢。