Question

我正在尝试渲染使用JSON数据作为其源的Highchart。但是，不是将其存储在不同的文件或网页中，而是在同一页面上的HTML部门中创建（来自MYSQL查询）。我可以对以下代码进行哪些更改，以便它从所需的div中读取JSON数据（我们称之为A,X,R etc）：

JSONContainer

我尝试$.getJSON('data.json', function(data) { options.series[0].data = data; var chart = new Highcharts.Chart(options); });代替getElementByID('JSONContainer')，但我想这不是正确的做法。我该怎么办？

编辑：这是我的代码：

'data.json'

Answer 1

您无需使$.getJSON获取已存在于html div上的数据。

如果您的数据如下所示

<div id="JSONContainer">[{"name":"LOG_DATE","data":["2015-09-08","2015-09-09"]},{"name":"a","data":[30.5‌,87.5]},{"name":"b","data":[55.5,82.4]},{"name":"c","data":[82,57.46]},{"name":"d‌","data":[82.4,87.4]}]</div>

就这样做

var json = JSON.parse($('#JSONContainer').text());

options.xAxis.categories = json[0]['data']; //rendering X Axis
$.each(json, function( index, value ) {
    options.series[index-1] = value;  //Making sure we skip first as that is X Axis
}); 
chart = new Highcharts.Chart(options);

PS：密钥和值周围的"非常重要，因为JSON解析需要它。

希望它有所帮助！

如何在Highcharts的同一页面上从HTML DIV获取JSON数据？

1 个答案: