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

How to parse JSON into HighCharts line graph?

提问by Atma

I am trying to parse the following JSON string remotely:

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

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

I am doing so with the following code:

我正在使用以下代码执行此操作：

$(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);
    });
  });
});

The chart does not render, but does so when I substitute the remote portion for the CSV example on the site.

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

Does anyone know what the problem is?

有谁知道问题是什么？

回答by Alexander

As far as I can tell your dataseems to be well formed. So, this should do it:

据我所知，你的形式data似乎很好。所以，这应该这样做：

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

回答by Tunlid

The problems is that the chart then is redrawn. So if you have other lines that is disabled (from legend), it will be visible agian when you do a update. I have 5 lines in my graph. It is updated every second. From the legend I can disable/remove some of the lines from the graph. But using this method above (it works) the complete graph is redrawn and all lines is visible again. Is it possible to just update the series (lines) and not the paramaters?

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

Like this (not working):

像这样（不工作）：

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);
                    }
                }
            });
        }

回答by Laabuelita

Atma. You just should write just dataiteminstead of dataitem[i]and it will work.

阿特玛。你应该只写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]));                  
    });
  });