highcharts - 带有 JSON 数据的 HighChart 热图

Question

我正在尝试将 JSON 特定数据集成到 highmaps/highcharts 提供的热图中。

上的例子

Link to HeatMap Demo

展示了如何使用 CSV 方法加载数据。但是我无法使用 JSON 数组运行它。任何人都可以提供与示例中的 CSV 等效的文件以获得相同的热图图表，或者向我展示另一个基于 JSON 的示例的方法？

提前谢谢。

干杯彼得

Answer 1

您需要将其转换为 col/row 点而不是日期字符串。您将有 2 个类别轴:x 和 y。然后 x/y 轴的索引变为 [x, y, value]。因此，如果您的数据从“2013-04-01”开始，那么它是您的第一个索引，即 [ ["2013-04-01",0,-0.7], ["2013-04-02",0,-3.4], ["2013-04-03",0,-1.1] ]变成:

[ [0,0,-0.7], [1,0,-3.4], [2,0,-1.1] ]

请注意，这只是一行的数据。你是什​​么 y成分？

编辑:
如果您的 yAxis 组件将是一天中的小时，那么您可以像这样设置 axii:

xAxis: {
    categories: ['2013-04-01', '2013-04-02', '2013-04-03'],
    labels: {
        rotation: 90
    }
},
yAxis: {
    title: {
        text: null
    },
    labels: {
        enabled: false
    },
    categories: ['Midnight', '1 am', '2 am', '3 am', '4 am', '5 am', '6 am', '7 am', '8 am', '9 am', '10 am', '11 am', 'Noon', '1 pm', '2 pm', '3 pm', '4 pm', '5 pm', '6 pm', '7 pm', '8 pm', '9 pm', '10 pm', '11 pm'],
    min: 0,
    max: 23,
    reversed: true
},

然后你的系列看起来像:

series: [{
    borderWidth: 0,
    nullColor: '#EFEFEF',
    data: [ [0,0,-0.7], [1,0,-3.4], [2,0,-1.1] ]
}]

直播 demo .

我在那里添加了其他项目，我会让你弄清楚(为什么我设置 reversed: true ，什么是 colorAxis 等)。需要注意的重要一点是 series.data格式不同于任何其他 highchart 设置。