Question

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

在此示例中，定义的数据为

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>

My fiddle with data series but without tooltip

//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],

Answer 1

首先，您需要定义数据结构，以使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/1jyfczpq/

API参考：

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

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

HighMaps的多个数据系列和多个数据工具提示

1 个答案: