如何将 JSON 解析为 HighCharts 折线图？答案

【问题标题】：How to parse JSON into HighCharts line graph?如何将 JSON 解析为 HighCharts 折线图？
【发布时间】：2012-04-06 05:43:08
【问题描述】：

我正在尝试远程解析以下 JSON 字符串：

[{"name":"Object1","data":[1,2]},{"name":"Object2","data":[3,4]}]

我正在使用以下代码：

$(function () {
  var chart;
  $(document).ready(function() {
    var options = {
      chart: {
        renderTo: 'container',
        type: 'line',
        marginRight: 130,
        marginBottom: 25
      },
      title: {
        text: 'hits by time',
        x: -20 //center
      },
      subtitle: {
        text: 'Source:',
        x: -20
      },
      xAxis: {
        categories: ['8am', '9am', '10am', '11am', '12pm', '1pm',
        '2pm', '3pm', '4pm', '5pm', '6pm', '7pm']
      },
      yAxis: {
        title: {
          text: 'Hits'
        },
        plotLines: [{
          value: 0,
          width: 1,
          color: '#808080'
        }]
      },
      tooltip: {
        formatter: function() {
          return '<b>'+ this.series.name +'</b><br/>'+
          this.x +': '+ this.y;
        }
      },
      legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'top',
        x: -10,
        y: 100,
        borderWidth: 0
      },
      series: []
    };  

    $.getJSON('http://localhost:8080/jsonget', function(data) {

      var series = {
        data: []
      };

      $.each(data, function(i,item){
        alert(item.name);
        series.name = item.name;
        $.each(item.data, function(j,dataitem){
          alert(dataitem);
          series.data.push(parseFloat(dataitem[i]));                  
        });
      });

      options.series.push(series);    

      // Create the chart
      var chart = new Highcharts.Chart(options);
    });
  });
});

图表不会呈现，但是当我用远程部分替换站点上的 CSV 示例时会呈现。

有谁知道问题出在哪里？

【问题讨论】：

嗨，您介意展示一下您是如何创建 json 数组的吗？我试图弄清楚如何使用 php 数组在我的数据周围加上括号。命名系列等我可以做。谢谢

标签： javascript jquery json highcharts

【解决方案1】：

据我所知，您的data 似乎格式正确。所以，应该这样做：

var chart;
$.getJSON('http://localhost:8080/UDPver/tagdiscover', function(data) {
  // Populate series
  options.series = data;    
  // Create the chart
  chart = new Highcharts.Chart(options);
});

【讨论】：

如果我有 2 个 y 轴？即一个 x 轴和两个 y 轴！

【解决方案2】：

问题是图表随后被重新绘制。因此，如果您有其他被禁用的行（来自图例），则在您进行更新时它将再次可见。我的图表中有 5 条线。它每秒更新一次。从图例中，我可以禁用/删除图表中的一些线。但是使用上面的这种方法（它有效）重新绘制了完整的图形，并且所有线条都再次可见。是否可以只更新系列（行）而不更新参数？

像这样（不工作）：

function doAjaxData() {
            AjaxLoadingIcon(1);
            $.ajax({
                url: getAjaxUrl(1),
                dataType: 'json',
                cache: false,
                async: true,
                success: function (json) {
                    AjaxLoadingIcon(0);
                    gchartOptions.series = [];
                    gchartOptions.series = json;
                    // gchart = new Highcharts.Chart(gchartOptions);
                    gchart.render();
                    _updateTimer = window.setTimeout("doAjaxData()", 1000);
                    }
                }
            });
        }

【讨论】：

【解决方案3】：

阿特玛。你只需要写dataitem 而不是dataitem[i] 就可以了。

  $.each(data, function(i,item){
    alert(item.name);
    series.name = item.name;
    $.each(item.data, function(j,dataitem){
      alert(dataitem);
      series.data.push(parseFloat(dataitem[i]));                  
    });
  });

【讨论】：