如何使用高地图在悬停时显示多个数据

How can show multiple data on hover with highmaps?

本文关键字:悬停 显示 数据 高地图 何使用 地图      更新时间:2023-09-26

如何使用highmaps在悬停地图上显示多个数据?

http://www.highcharts.com/maps/demo

通常我们可以显示这样的数据:

 var data = [];
    $.each(columns[0], function (i, code) {
        data.push({
            code: code,
            value: columns[3][i],
            name: columns[2][i],
            hasta:columns[4][i]
        });
    });

但这只允许使用joinBy的一种类型的数据:

 series : [{
                    data : data,
                    mapData: Highcharts.maps['countries/tr/tr-all'],
                    joinBy: ['hc-key','name'],
                    animation: true,
                    name: 'Diyaliz Verileri',
                    states: {
                        hover: {
                            color: '#BADA55'
                        }
                    },
                    tooltip: {
                        valueSuffix: ''
                    }
                }]

但是当我们想在悬停时显示多个数据时,我们能做什么?

jsfiddle:http://jsfiddle.net/CMengineer/j9mujnnz/

的工作原理与常规的高图表相同。只需定义一个客户工具提示格式化程序:

             tooltip: {
                 formatter: function(){
                     var s = this.key + '<br/>';
                     s += 'Value:' + this.point.value + '<br/>';
                     s += 'Hasta:' + this.point.hasta;
                     return s;
                 },
             },

更新的小提琴。