从远程 JSON 文件绘制 Highcharts 图

Posted 2023-05-08

【中文标题】从远程 JSON 文件绘制 Highcharts 图

【英文标题】：Plot a Highcharts graph from remote JSON file

【发布时间】：2018-06-07 15:29:48

【问题描述】：

我正在尝试使用 Highcharts JS 绘制图表。我有一个 JSON 文件，比如，

["receive_date":"2013-11-04","responses":"2"]

JSON :- https://api.myjson.com/bins/gdpu7

receive_date 应该是 X 轴，responses 应该是 Y 轴。我正在加载远程 JSON 数据并将其传递到 Highcharts。但是，分配 X 轴 receive_date 键和分配 Y 轴 responses 键的推荐方法是什么。

JSFiddle :-

http://jsfiddle.net/273x2f13/1/

// Create the chart
$.getJSON("https://api.myjson.com/bins/gdpu7", function(data) 
    chart: 
        type: 'column'
    ,
    title: 
        text: 'Date Vs Rsponses'
    ,
    subtitle: 
        text: 'Chart View Here'
    ,
    xAxis: 
        type: 'category'
    ,
    yAxis: 
        title: 
            text: 'Responses'
        

    ,
    legend: 
        enabled: false
    ,
    plotOptions: 
        series: 
            borderWidth: 0,
            dataLabels: 
                enabled: true,
                format: 'point.y:.1f%'
            
        
    ,

    tooltip: 
        headerFormat: '<span style="font-size:11px">series.name</span><br>',
        pointFormat: '<span style="color:point.color">point.name</span>: <b>point.y:.2f%</b> of total<br/>'
    ,

    series: [
        x: 'receive_date',
        y: 'responses'
        colorByPoint: true,
        data: data
    ]


);

我用它来给它 X 轴和 Y 轴的值。但是，它是不正确的。

series: [
            x: 'receive_date',
            y: 'responses'
            colorByPoint: true,
            data: data
        ]

【参考方案1】：

你应该使用Array#map。

例如：

xAxis: 
  type: 'category',
  categories: data.map(function(x) 
    return x.receive_date;
  )
,

还有这个：

series: [
  colorByPoint: true,
  data: data.map(function(x) 
    return x.responses * 1; // Convert to a number.
  )
]

类似这样的：

$(function() 
  $.getJSON("https://api.myjson.com/bins/gdpu7", function(data) 
    console.log(data);
    Highcharts.chart('container', 
      chart: 
        type: 'column'
      ,
      title: 
        text: 'Date Vs Rsponses'
      ,
      subtitle: 
        text: 'Chart View Here'
      ,
      xAxis: 
        type: 'category',
        categories: data.map(function(x) 
          return x.receive_date;
        )
      ,
      yAxis: 
        title: 
          text: 'Responses'
        
      ,
      legend: 
        enabled: false
      ,
      plotOptions: 
        series: 
          borderWidth: 0,
          dataLabels: 
            enabled: true,
            format: 'point.y:.1f'
          
        
      ,
      tooltip: 
        headerFormat: '<span style="font-size:11px">series.name</span><br>',
        pointFormat: '<span style="color:point.color">point.name</span>: <b>point.y:.2f</b> of total<br/>'
      ,
      series: [
        colorByPoint: true,
        data: data.map(function(x) 
          return x.responses * 1;
        )
      ]
    );
  );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto;"></div>

【参考方案2】：

另一种方法是将x轴的类型更改为'datetime'并将receive_date属性转换为时间戳：

$.getJSON("https://api.myjson.com/bins/gdpu7", function(data) 

  var chart = Highcharts.chart('container', 
    xAxis: 
      type: 'datetime'
    ,

    series: [
      data: data.map(function(p) 
        var ymd = p.receive_date.split("-");
        return [Date.UTC(ymd[0], ymd[2] - 1, ymd[1]), parseInt(p.responses)];
      )
    ]
  );
);

现场演示： http://jsfiddle.net/kkulig/da6Lejy7/