【问题标题】:how to fetch data from json file in highchart如何从highchart中的json文件中获取数据
【发布时间】:2016-03-02 17:55:04
【问题描述】:

我正在尝试从 json 文件中获取图表数据。第一时间使用它,以便从高图表文档中复制它。但它不起作用。

json:

[ 
              { "name"  : "Asia", "data" :[4502, 635, 809, 947, 1402, 3634, 5268] },
              { "name"  : "Africa", "data" : [106, 107, 111, 133, 221, 767, 1766] },
              { "name"  : "Europe",    "data" : [163, 203, 276, 408, 547, 729, 628] },
              { "name"  : "America",    "data" : [18, 31, 54, 156, 339, 818, 1201] },
              {"name"  : "Oceania",    "data" : [2, 2, 2, 6, 13, 30, 46] }
            ]

脚本:

<script>
$(function () {
    var options = {
        chart: {
            renderTo: 'container',
            type: 'spline'
        },
        title: {
            text: 'Historic and Estimated Worldwide Population Growth by Region'
        },
        subtitle: {
            text: 'Source: Wikipedia.org'
        },
        xAxis: {
            categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
            tickmarkPlacement: 'on',
            title: {
                enabled: false
            }
        },
        yAxis: {
            title: {
                text: 'Billions'
            },
            labels: {
                formatter: function () {
                    return this.value / 1000;
                }
            }
        },
        tooltip: {
            shared: true,
            valueSuffix: ' millions'
        },
        plotOptions: {
            area: {
                stacking: 'normal',
                lineColor: '#666666',
                lineWidth: 1,
                marker: {
                    lineWidth: 1,
                    lineColor: '#666666'
                }
            }
        },
        series: [{}]




    };


 $.getJSON('http://s000.tinyupload.com/?file_id=46814948573049842058', function(data) {
        options.series[0].data = data;
        var chart = new Highcharts.Chart(options);
    });
})
</script>

控制台没有显示任何错误。谁能看看代码有什么问题。

【问题讨论】:

    标签: javascript jquery json highcharts


    【解决方案1】:

    我无法从我的工作中模拟你的代码,但是,这应该可以解决它:

    • TinyUpload 不允许直接访问您的 data.json。把它 你可以的地方。 ( OBS:这不是 JSON 文件,它是一个字符串 描述数组/对象结构,您应该将其转换为 json格式优先);

    如果您还是决定将其作为字符串接收,请执行以下步骤:

    • 收到数据后,使用Eval() function进行转换
      放入和 array/object ,然后将其放入 HighChart 脚本中。

    例子

    var string = '['+
                  '{ "name"  : "Asia", "data" :[4502, 635, 809, 947, 1402, 3634, 5268] },'+
                  '{ "name"  : "Africa", "data" : [106, 107, 111, 133, 221, 767, 1766] },'+
                  '{ "name"  : "Europe",    "data" : [163, 203, 276, 408, 547, 729, 628] },'+
                  '{ "name"  : "America",    "data" : [18, 31, 54, 156, 339, 818, 1201] },'+
                  '{"name"  : "Oceania",    "data" : [2, 2, 2, 6, 13, 30, 46] }'+
                ']';
    var yourDataObject = eval(string);
    

    PS: 我认为加载数据的正确方法是:

    options.series = data;
    

    【讨论】:

    • 我做错了几件事。 1) TinyUpload 不允许直接访问 .json。 2) 我将options.series[0].data = data; 更改为options.series = data; 它现在开始工作了。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-06-19
    • 1970-01-01
    • 1970-01-01
    • 2019-06-17
    • 1970-01-01
    相关资源
    最近更新 更多