使用JSON数据的HighChart热力图

Question

使用JSON数据的HighChart热力图

highcharts

7

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

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

提前感谢您。

Peter祝好。

- peter0601

你的json数据是什么样子？热力图使用的是x/y坐标矩阵 [x, y, value]。 - wergeld

尝试了这一个： [ ["2013年04月01日",0,-0.7], ["2013年04月02日",0,-3.4], ["2013年04月03日",0,-1.1] ] - peter0601

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- wergeld · Accepted Answer

你需要将其转换为列/行点而不是日期字符串。你将拥有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”分量是什么？

编辑：如果你的y轴分量将是一天中的小时数，那么你应该按照以下方式设置你的坐标轴：

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] ]
}]

实时演示。

我添加了其他项目，让你自己解决（为什么我要设置reversed: true，什么是colorAxis等）。需要注意的重要事项是series.data格式与任何其他highchart设置不同。