HighCharts getJson - 无法显示

时间:2017-11-01 14:58:26

标签: javascript highcharts

Json由我的服务器返回

{
    "data": [{
        "name": "name",
        "data": ["[Date.UTC(2017, 01, 25), 89]",
                 "[Date.UTC(2017, 01, 26), 99]",
                 "[Date.UTC(2017, 02, 02), 106]",
                 "[Date.UTC(2017, 02, 04), 102]",
                 "[Date.UTC(2017, 02, 07), 110]",
                 "[Date.UTC(2017, 10, 31), 155]"]
    }]
}

我正在使用的代码来自我生成的数据(上图) https://www.highcharts.com/demo/spline-irregular-time

我的Javascript代码

Please Remove one T from bit ly
    $.getJSON('http://bitt.ly/2zpoZqT', function (csv) {
        console.log(csv['data']);
        Highcharts.chart('container', {
        chart: {
            type: 'spline'
        },
        title: {
            text: 'Keyword Tracking'
        },
        subtitle: {
            text: 'Top 20 Keywords'
        },
        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: { // don't display the dummy year
                month: '%e. %b',
                year: '%b'
            },
            title: {
                text: 'Date'
            }
        },
        yAxis: {
            title: {
                text: 'Snow depth (m)'
            },
            min: 0
        },
        tooltip: {
            headerFormat: '<b>{series.name}</b><br>',
            pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
        },

        plotOptions: {
            spline: {
                marker: {
                    enabled: true
                }
            }
        },

        series: csv['data']
    });

    });

1 个答案:

答案 0 :(得分:2)

只需将好的属性series添加到成功调用$.getJSON中的对象json return,就像您一样。但是,这种情况会根据脚本的需要创建一个属性series,并affect dataseriesdelete data的价值已经完成。

&#13;
&#13;
    $.getJSON('http://bitt.ly/2zpoZqT', function (csv) {
        console.log(csv['data']);
        csv.series = csv.data;//new attribute series affected to data
        delete csv.data; //delete data to have the good object
        Highcharts.chart('container', {
        chart: {
            type: 'spline'
        },
        title: {
            text: 'Keyword Tracking'
        },
        subtitle: {
            text: 'Top 20 Keywords'
        },
        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: { // don't display the dummy year
                month: '%e. %b',
                year: '%b'
            },
            title: {
                text: 'Date'
            }
        },
        yAxis: {
            title: {
                text: 'Snow depth (m)'
            },
            min: 0
        },
        tooltip: {
            headerFormat: '<b>{series.name}</b><br>',
            pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
        },

        plotOptions: {
            spline: {
                marker: {
                    enabled: true
                }
            }
        },

        series: csv['data']
    });

    });
&#13;
&#13;
&#13;