Javascript 在jQuery Highcharts插件中使用json数据 var图； $（文档）.ready（函数（）{ //定义选项 变量选项={ 图表：{ renderTo:“容器” }, 标题：{ 文字：“每日访问www.highcharts.com” }, 副标题:{ 文本：“来源：谷歌分析” }, xAxis：{ 键入：“日期时间”， 间隔时间：7*24*3600*1000，//一周 宽度：0， 网格线宽度：1， 标签：{ 对齐：“左”， x:3， y:-3 } }, yAxis:[{//左y轴 标题：{ 文本：空 }, 标签：{ 对齐：“左”， x:3， y:16， 格式化程序：函数（）{ 返回Highcharts.numberFormat（this.value，0）； } }, showFirstLabel:错误 }，{//右y轴 链接到：0， 网格线宽：0， 相反：是的， 标题：{ 文本：空 }, 标签：{ 对齐：“右”， x:-3， y:16， 格式化程序：函数（）{ 返回Highcharts.numberFormat（this.value，0）； } }, showFirstLabel:错误 }], 图例：{ 对齐：“左”， 垂直排列：“顶部”， y:20， 浮动：是的， 边框宽度：0 }, 工具提示：{ 分享：是的， 十字准星：对 }, 打印选项：{ 系列：{ 光标：“指针”， 要点：{ 活动：{ 单击：函数（）{ hs.htmlExpand（空{ 页面来源：{ x:this.pageX， y:这个，佩吉 }, headingText:this.series.name， maincontentText:Highcharts.dateFormat（“%A，%b%e，%Y'，this.x）+'：'+ 这个.y+“访问”， 宽度：200 }); } } }, 标记：{ 线宽：1 } } }, 系列：[{ 名称：'所有访问'， 线宽：4， 标记：{ 半径：4 } }, { 名称：'新访客' }] } //使用jQuery异步加载数据。成功后，添加数据 //选择选项并启动图表。 //该数据通过将GA自定义报告导出到TSV获得。 // http://api.jquery.com/jQuery.get/ jQuery.get（'analytics.tsv'，null，函数（tsv）{ 变量行=[]， 听=假， 日期 //设置两个数据系列 所有访问量=[]， 新访客=[]； 试一试{ //将返回的数据拆分为行并对其进行分析 tsv=tsv.分割（/\n/g）； jQuery.each（tsv，函数（i，行）{ //侦听图形和表标题之间的数据行 如果（tsv[i-3]='#图'）{ 倾听=真实； }else if（line=''|| line.charAt（0）='#'）{ 倾听=错误； } //所有数据行都以双引号开头 如果（听）{ line=line.split（/\t/）； date=date.parse（第[0]+'UTC'行）； 所有访问。推([ 日期 parseInt（第[1]行）。替换（'，'，''），10） ]); 推([ 日期 parseInt（第[2]行）。替换（'，'，''），10） ]); } }); }捕获（e）{警报（e.message）} options.series[0]。数据=所有访问； options.series[1]。数据=新访问者； 图表=新的高点图表。图表（选项）； }); });

上面是jquery插件“highcharts”的示例代码，如果json字符串为： { 名称：'所有访问'， 数据：[1,0,4] }, { 名称：'新访问'， 数据：[5,7,3] }

---

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

tsv文件的每一行中都有一个日期项，但json数据中没有任何日期。那么我们应该去哪里呢

    <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>