Highcharts 操作series 的data里的数据

Highcharts动态操作series数据实现个性化tooltip

最新推荐文章于 2021-02-04 11:41:05 发布

原创最新推荐文章于 2021-02-04 11:41:05 发布 · 2.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#highcharts

Highcharts 专栏收录该内容

0 篇文章

订阅专栏

本文介绍如何在Highcharts中操作series的data，以便在tooltip中显示额外信息。通过将原始数据[67.5, 59.0, '张三']转换为{x: 61.2, y: 51.6, name: '张三'}的格式，并在tooltip配置中使用{point.name}来展示data中人员姓名。" 123711333,10173919,位运算全解析：从基础到高级应用,"['编程技巧', '位操作', '数据处理', '算法应用', 'Java编程']

在绘制highcharts 散列图的时候遇到诸如 series: [{
                name: '行政部',
                color: 'rgba(223, 83, 83, .5)',
                data: [ [67.5, 59.0,‘张三’] , [67.5, 59.0,'李四'], [59.5, 49.2,'王五'], [57.0, 63.0,4], [55.8, 53.6,5],
                    [72.5, 55.2,6], [70.9, 54.2,7], [72.9, 62.5,8], [53.4, 42.0,9], [60.0, 50.0,10],
                    [76.5, 71.8,11], [64.4, 55.5,12]]

            }, {
                name: '研发部',
                color: 'rgba(119, 152, 191, .5)',
                data: [[74.0, 65.6], [75.3, 71.8], [93.5, 80.7], [86.5, 72.6], [87.2, 78.8],
                    [70.2, 62.3], [77.8, 82.7], [79.1, 79.1], [90.5, 98.2], [77.8, 84.1],
                    [80.3, 83.2], [80.3, 83.2]]

}]

在 tooltip: { headerFormat: '<b>{series.name}</b><br>', pointFormat: '{point.x} 分, {point.y} 分,xxx' }里的xxx位置需要得到data里每个数组的第三个数据，既某人（如张三），这就需要操作series的data

步骤1：将[67.5, 59.0,‘张三’] （其他数据同样也要改变）改为{x:61.2,y: 51.6,name:'张三'}的数据格式

步骤2：将xxx改为{point.name}即可，注意：这里的name是和上面的data里的name对应的