从远程 JSON 文件绘制 Highcharts 图答案

【问题标题】：Plot a Highcharts graph from remote JSON file从远程 JSON 文件绘制 Highcharts 图
【发布时间】：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
        }]

【问题讨论】：

标签： javascript jquery json highcharts

【解决方案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/

【讨论】：