javascript - 将 JSON 数据与 jQuery highcharts 插件结合使用

Question

<script type="text/javascript">
    var chart;
    $(document).ready(function() {
        // Define the options
        var options = {
            chart: {
                renderTo: 'container'
            },

            title: {
                text: 'Daily visits at www.highcharts.com'
            },

            subtitle: {
                text: 'Source: Google Analytics'
            },

            xAxis: {
                type: 'datetime',
                tickInterval: 7 * 24 * 3600 * 1000, // One week
                tickWidth: 0,
                gridLineWidth: 1,
                labels: {
                    align: 'left',
                    x: 3,
                    y: -3 
                }
            },

            yAxis: [{ // Left Y axis
                title: {
                    text: null
                },
                labels: {
                    align: 'left',
                    x: 3,
                    y: 16,
                    formatter: function() {
                        return Highcharts.numberFormat(this.value, 0);
                    }
                },
                showFirstLabel: false
            }, { // right y axis
                linkedTo: 0,
                gridLineWidth: 0,
                opposite: true,
                title: {
                    text: null
                },
                labels: {
                    align: 'right',
                    x: -3,
                    y: 16,
                    formatter: function() {
                        return Highcharts.numberFormat(this.value, 0);
                    }
                },
                showFirstLabel: false
            }],

            legend: {
                align: 'left',
                verticalAlign: 'top',
                y: 20,
                floating: true,
                borderWidth: 0
            },

            tooltip: {
                shared: true,
                crosshairs: true
            },

            plotOptions: {
                series: {
                    cursor: 'pointer',
                    point: {
                        events: {
                            click: function() {
                                hs.htmlExpand(null, {
                                    pageOrigin: {
                                        x: this.pageX, 
                                        y: this.pageY
                                    },
                                    headingText: this.series.name,
                                    maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) +':<br/> '+ 
                                        this.y +' visits',
                                    width: 200
                                });
                            }
                        }
                    },
                    marker: {
                        lineWidth: 1
                    }
                }
            },

            series: [{
                name: 'All visits',
                lineWidth: 4,
                marker: {
                    radius: 4
                }
            }, {
                name: 'New visitors'
            }]
        }

        // Load data asynchronously using jQuery. On success, add the data
        // to the options and initiate the chart.
        // This data is obtained by exporting a GA custom report to TSV.
        // http://api.jquery.com/jQuery.get/
        jQuery.get('analytics.tsv', null, function(tsv) {
            var lines = [],
                listen = false,
                date,

                // Set up the two data series.
                allVisits = [],
                newVisitors = [];

            try {
            // Split the data return into lines and parse them.
            tsv = tsv.split(/\n/g);
            jQuery.each(tsv, function(i, line) {
                // Listen for data lines between the Graph and Table headers.
                if (tsv[i - 3] == '# Graph') {
                    listen = true;
                } else if (line == '' || line.charAt(0) == '#') {
                    listen = false;
                }

                // All data lines start with a double quote.
                if (listen) {
                    line = line.split(/\t/);
                    date = Date.parse(line[0] +' UTC');

                    allVisits.push([
                        date, 
                        parseInt(line[1].replace(',', ''), 10)
                    ]);
                    newVisitors.push([
                        date, 
                        parseInt(line[2].replace(',', ''), 10)
                    ]);
                }
            });
            } catch (e) { alert(e.message) }
            options.series[0].data = allVisits;
            options.series[1].data = newVisitors;

            chart = new Highcharts.Chart(options);
        });
    });
</script>

上面是 jQuery 插件“highcharts”的示例代码。我正在尝试从 JSON 文件获取数据，如果 JSON 字符串为: { name: 'allVisits', data: [1, 0, 4] }, { name: 'newVisits', data: [5, 7, 3] } .

示例文件从“tsv”文件获取数据，因此我尝试从 JSON 文件获取数据。

Answer 1

从你的简短 JSON 示例中，我会说它是 invalid .

{ name: 'allVisits', data: [1, 0, 4] }, { name: 'newVisits', data: [5, 7, 3] }

应该是:

 [{"name":"allVisits", "data": [1, 0, 4] }, {"name": "newVisits", "data": [5, 7, 3] }]

如果我没记错的话，jQuery 会进行一些 JSON 验证。

一旦您的文件是有效的 JSON，您就可以使用 jQuery.getJSON而不是jQuery.get .

jQuery.getJSON( 'file.json' , function( data ){

   alert( data[0].name );
   // do your thang with data

});

使用 JSONLint 测试您的 JSON