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

How to fetch JSON data from HTML DIV on same page for Highcharts?

本文关键字：DIV HTML 一页 Highcharts 数据 何获取 获取 JSON      更新时间：2023-09-26

我正在尝试渲染一个使用JSON数据作为其来源的Highchart。然而，它不是存储在不同的文件或网页中，而是在同一页面的HTML分区中创建(从MYSQL查询)。我可以对以下代码进行哪些更改，以便它将从所需的div(让我们称之为JSONContainer)读取JSON数据:

$.getJSON('data.json', function(data) {
    options.series[0].data = data;
    var chart = new Highcharts.Chart(options);
});

我尝试getElementByID('JSONContainer')代替'data.json'，但我想这不是正确的方法。我能做什么?

编辑:这是我的代码:

$.getJSON("getElementById(JSONContainer)", function(json) {
    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);
});

您不需要使$.getJSON获得已经在htmldiv上的数据。

如果你的数据在

下面
<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解析需要它。

希望有帮助!

相关文章：