读取 json 文件输出到 highcharts

Question

我是来读json文件输出到highcharts的。

我有一个 highcharts 区域图，其值来自 json，其格式如下：

scope.jsondata = [
    {
        "Name": "A",
        "Categories": "03.01",
        "Locate": "1",
        "Value": 30
    },
    {
        "Name": "A",
        "Categories": "03.02",
        "Locate": "1",
        "Value": 50
    },
    {
        "Name": "A",
        "Categories": "03.03",
        "Locate": "1",
        "Value": 60
    },
    {
        "Name": "A",
        "Categories": "03.04",
        "Locate": "1",
        "Value": 40
    },
    {
        "Name": "A",
        "Categories": "03.05",
        "Locate": "1",
        "Value": 70
    }
];

如何将我的 json 数据的这些值嵌入到 angularJS 中？

scope.render = function (data) {
    var target = element.find('#detail-usage-chart'),
        firstDate = {
            name: scope.jsondata.Name,
            data:  scope.jsondata.Vaule,
            color: '#f48d7f',
            type: 'area'
        },
        tempOption = {
            data: [10, 13, 17, 8, 11, 5, 11, 13 ,16, 18, 20, 13, 16, 21, 19],
            type: 'spline',
            yAxis: 1
        }
};

请提供一种合适的方式来嵌入来自 json 的数据。

Answer 1

面积图需要一个名称和一个包含系列中值的数组：
See here

所以您所要做的只是一个快速函数，以便以这种方式准备您的数据。例如：

var scope.readyValues = [];
for(var i=0;i<scope.jsondata.length;i++)
{
    scope.readyValues.push(scope.jsondata[i].Value);    
}

接下来，就这样配置系列：

// .....chart options
series: [{
            name: scope.jsondata[0].Name,
            data: scope.readyValues
        }

如果您的 scope.jsondata 中有多个名称，那么您可以使用 jquery 映射函数，或者您可以为每个名称创建一个数组。
并且由于您使用的是 angular 我建议您使用 Highcharts-ng 它更容易 ;)

读取 json 文件输出到 highcharts

read the json file to output to an highcharts

json

angularjs

highcharts