Question

我正在尝试远程解析以下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示例时，图表不会呈现。

有谁知道问题是什么？

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

Answer 2

问题是图表会重新绘制。因此，如果您有其他禁用的行（来自图例），则在执行更新时它将显示为agian。我的图表中有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);
                    }
                }
            });
        }

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

如何将JSON解析为HighCharts线图？

3 个答案: