如何将对象绘制到charts.js

Posted 2023-05-08

【中文标题】如何将对象绘制到charts.js

【英文标题】：How to plot object to charts.js

【发布时间】：2019-12-14 13:16:47

【问题描述】：

过去我在数组中绘制了 json 对象，但我想知道如何在数组中绘制这些对象数组。我想我写得对，或者它可能是在盯着我看。尝试使用 charts.js 进行绘图 在此先感谢您提供任何有用的建议。

对象示例：

“社交媒体出站”：[ “LeadSource”：“社交媒体出站”， "创建日期": "2019-06-21", “导联数”：“4” , “LeadSource”：“社交媒体出站”， "创建日期": "2019-07-26", “NumLeads”：“26” , “LeadSource”：“社交媒体出站”， "创建日期": "2019-07-27", “NumLeads”：“28” , “LeadSource”：“社交媒体出站”， "创建日期": "2019-07-28", “NumLeads”：“36” , “LeadSource”：“社交媒体出站”， "创建日期": "2019-07-29", “NumLeads”：“27” , “LeadSource”：“社交媒体出站”， "创建日期": "2019-07-30", “NumLeads”：“29” , “LeadSource”：“社交媒体出站”， "创建日期": "2019-07-31", “NumLeads”：“21” , “LeadSource”：“社交媒体出站”， "创建日期": "2019-08-01", “NumLeads”：“38” , “LeadSource”：“社交媒体出站”， "创建日期": "2019-08-02", “NumLeads”：“26” , “LeadSource”：“社交媒体出站”， "创建日期": "2019-08-03", “NumLeads”：“27” , “LeadSource”：“社交媒体出站”， "创建日期": "2019-08-04", “NumLeads”：“19” , “LeadSource”：“社交媒体出站”， "创建日期": "2019-08-05", “NumLeads”：“24” , “LeadSource”：“社交媒体出站”， "创建日期": "2019-08-06", “NumLeads”：“17” ]

【参考方案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"  ></canvas>

【讨论】：

非常感谢！！！效果很好！我有另一个快速相关的问题。我也可以在新帖子中发帖。我已经对一个 json 对象进行了分组，因为我需要为每个潜在客户源制作一个多线图。这是我的 json 对象：

这是我的 json 对象链接：codepen.io/edwardgnt/post/json-object

这是我的 JSON 对象组代码：codepen.io/edwardgnt/post/json-object-groupby

欢迎。我不明白你的新问题。您可以通过一些详细说明打开一个新问题。此外，如果此答案对当前问题是正确的，您可以将其接受。这会很有帮助。提前致谢

好的，听起来不错。我会再发一个帖子。我非常感谢您的时间和代码。接受