Диаграмма js с использованием Json

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>