时间戳

首页 > 解决方案 > 使用 HighMaps 的多个数据系列和多个数据工具提示

highmaps - 使用 HighMaps 的多个数据系列和多个数据工具提示

问题描述

我想在工具提示中显示同一状态的多个数据。我应该如何定义数据并相应地格式化工具提示？

在示例中，定义的数据是

var data = [['in-tn', 1], ['in-ap', 2]]

工具提示是

Random data
Tamilnadu : 1

我想将我的数据定义为

  var data = [['in-tn', Rank1 , Value1 , 'Station ID1', Value2],
              ['in-tn', Rank2 , Value2 , 'Station ID2', Value3],
              ['in-ap', Rank3 , Value3 , 'Station ID3', Value5],
              ['in-ap', Rank4 , Value4 , 'Station ID4', Value6]]

并在悬停在“in-tn”上时获取工具提示

TamiNadu
Station 1 , Rank = 1, Value1 = 13, Value 2 = 189.76<br>
Station 10, Rank = 2, Value1 = 23, Value 2 = 156.45<br>

我摆弄数据系列但没有工具提示

//data for which the Highmaps to be generated with all data in tooltip which matches the state code
var data = [['in-tn', 1 , 13 , 'Station 1', 189.76], 
            ['in-tn', 2 , 23 , 'Station 10', 156.45],

标签： highmaps

解决方案

首先，您需要定义数据的结构，以便 Highcharts “知道”如何解析它，因此请使用series.keys参数，就像这样：

series: [{
    data: data,
    name: 'Random data',
    keys: ['hc-key', 'rank', 'value', 'stationId', 'value2'],
    states: {
        hover: {
            color: '#FFC300'
        }
    },
    dataLabels: {
        enabled: true,
        format: '{point.name}'
    }
}]

然后你必须定义你自己的工具提示格式。您可以使用tooltip.pointFormat：工具提示：{

pointFormat: '<span>{point.stationId}, Rank: <b>{point.rank}</b>, Value 1: <b>{point.value}</b>, Value 2: <b>{point.value2}</b></span>'
    }

现场示例：https ://jsfiddle.net/BlackLabel/1oudhgq3/

API参考：

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

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

推荐阅读