Question

过去我在数组中绘制了json对象，但我想知道如何在数组中绘制这些对象数组。我想我写的正确，否则可能让我无所适从。尝试使用Charts.js进行绘制预先感谢您提供任何有用的建议。

对象示例：

{ “社交媒体出站”：[{ “ LeadSource”：“社交媒体出站”， “ CreatedDate”：“ 2019-06-21”， “ NumLeads”：“ 4” }，{ “ LeadSource”：“社交媒体出站”， “ CreatedDate”：“ 2019-07-26”， “ NumLeads”：“ 26” }，{ “ LeadSource”：“社交媒体出站”， “ CreatedDate”：“ 2019-07-27”， “ NumLeads”：“ 28” }，{ “ LeadSource”：“社交媒体出站”， “ CreatedDate”：“ 2019-07-28”， “ NumLeads”：“ 36” }，{ “ LeadSource”：“社交媒体出站”， “ CreatedDate”：“ 2019-07-29”， “ NumLeads”：“ 27” }，{ “ LeadSource”：“社交媒体出站”， “ CreatedDate”：“ 2019-07-30”， “ NumLeads”：“ 29” }，{ “ LeadSource”：“社交媒体出站”， “ CreatedDate”：“ 2019-07-31”， “ NumLeads”：“ 21” }，{ “ LeadSource”：“社交媒体出站”， “ CreatedDate”：“ 2019-08-01”， “ NumLeads”：“ 38” }，{ “ LeadSource”：“社交媒体出站”， “ CreatedDate”：“ 2019-08-02”， “ NumLeads”：“ 26” }，{ “ LeadSource”：“社交媒体出站”， “ CreatedDate”：“ 2019-08-03”， “ NumLeads”：“ 27” }，{ “ LeadSource”：“社交媒体出站”， “ CreatedDate”：“ 2019-08-04”， “ NumLeads”：“ 19” }，{ “ LeadSource”：“社交媒体出站”， “ CreatedDate”：“ 2019-08-05”， “ NumLeads”：“ 24” }，{ “ LeadSource”：“社交媒体出站”， “ CreatedDate”：“ 2019-08-06”， “ NumLeads”：“ 17” }]

Answer 1

您可以构建这样的条形图。我导出了JSON数据here，并提出了ajax请求以获取数据并在图表中使用它。

var ctx = document.getElementById('myChart').getContext('2d');
  var dataset = {
    type: 'bar',
    data: {
      labels: [],
      datasets: [{
        label: 'SOCIAL MEDIA OUTBOUND',
        backgroundColor: 'rgba(0, 149, 255, 0.70)',
        borderColor: 'rgba(0, 149, 255, 0.75)',
        hoverBackgroundColor: 'rgba(0, 149, 255, 1)',
        hoverBorderColor: 'rgba(0, 149, 255, 1)',
        data: []
      }]
    },
    options: {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      }
    }
  }

  var getData = function(chartdata) {
    $.ajax({
      url: 'https://api.myjson.com/bins/fadwx',
      success: function(data) {
        //console.log(data);
        data.forEach((el, i) => {
          chartdata.data.labels.push(el.CreatedDate);
          chartdata.data.datasets[0].data.push(el.NumLeads);
        });
        var myChart = new Chart(ctx, chartdata);

      }
    });
  };
  getData(dataset);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

如何将对象绘制到Charts.js

1 个答案: