javascript - 使用 Json 的图表 js

Question

嗨，我有这个 json 结果

[{"date":"1/1/2020 12:00:00 AM","Count":2},
{"date":"1/2/2020 12:00:00 AM","Count":1},
{"date":"1/3/2020 12:00:00 AM","Count":0},
{"date":"1/4/2020 12:00:00 AM","Count":0}]

我有使用图表js的简单图表。我怎样才能做同样的事情，但使用我的 json 结果X 是日期，Y 是计数。

使用这个。

var myLineChart = new Chart(ctx, {
  type: 'line',
  data: {
      labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    datasets: [{
      label: "Earnings",
      lineTension: 0.3,
      backgroundColor: "rgba(78, 115, 223, 0.05)",
      borderColor: "rgba(78, 115, 223, 1)",
      pointRadius: 3,
      pointBackgroundColor: "rgba(78, 115, 223, 1)",
      pointBorderColor: "rgba(78, 115, 223, 1)",
      pointHoverRadius: 3,
      pointHoverBackgroundColor: "rgba(78, 115, 223, 1)",
      pointHoverBorderColor: "rgba(78, 115, 223, 1)",
      pointHitRadius: 10,
      pointBorderWidth: 2,
      data: [0, 10000, 5000, 15000, 10000, 20000, 15000, 25000, 20000, 30000, 25000, 40000],
    }],
  },

抱歉，我是 JS 的新手。希望有人帮助我。预先感谢您。

Answer 1

希望对您有帮助。

var jsonfile = {
  "jsonarray": [{
      "date": "1/1/2020 12:00:00 AM",
      "Count": 2
    },
    {
      "date": "1/2/2020 12:00:00 AM",
      "Count": 1
    },
    {
      "date": "1/3/2020 12:00:00 AM",
      "Count": 0
    },
    {
      "date": "1/4/2020 12:00:00 AM",
      "Count": 0
    }
  ]
};

var labels = jsonfile.jsonarray.map(function(e) {
  return e.date;
});
var data = jsonfile.jsonarray.map(function(e) {
  return e.Count;
});;

var ctx = canvas.getContext('2d');
var config = {
  type: 'line',
  data: {
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    datasets: [{
      label: "Earnings",
      lineTension: 0.3,
      backgroundColor: "rgba(78, 115, 223, 0.05)",
      borderColor: "rgba(78, 115, 223, 1)",
      pointRadius: 3,
      pointBackgroundColor: "rgba(78, 115, 223, 1)",
      pointBorderColor: "rgba(78, 115, 223, 1)",
      pointHoverRadius: 3,
      pointHoverBackgroundColor: "rgba(78, 115, 223, 1)",
      pointHoverBorderColor: "rgba(78, 115, 223, 1)",
      pointHitRadius: 10,
      pointBorderWidth: 2,

      data: data,
      backgroundColor: 'rgba(0, 119, 204, 0.3)'
    }]
  }
};

var chart = new Chart(ctx, config);

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="canvas"></canvas>