Chart.js使用json数据

Question

我这里有一个jsfiddle - https://jsfiddle.net/nhww0uor/4/

我使用chart.js

有一个简单的折线图

数据在代码中被硬编码。

我如何使用json

中的数据做同样的事情

    var data = {
        'January' : '65',
        'February' : '59',
        'March' : '80',
        'April' : '81',
        'May' : '56',
        'June' : '55'
    }

    const CHART = document.getElementById('lineChart');

    var lineChart = new Chart(CHART, {
        type: 'line',
        data: {
            labels: ['January','February','March','April','May','June'],
            datasets:[
                {
                    label: 'My first dataset',
                    fill: false,
                    lineTension: 0,
                    backgroundColor: "rgba(75,192,192,0.4)",
                    borderColor: "rgba(75,192,192,1)",
                    borderCapStyle: 'butt',
                    borderDash: [],
                    borderDashOffset: 0.0,
                    borderJointStyle: 'miter',

                    data: [65,59,80,81,56,55]
                }
            ]
        }
    })

Answer 1

考虑到您拥有以下JSON数据......

{
   "January": 65,
   "February": 59,
   "March": 80,
   "April": 81,
   "May": 56,
   "June": 55
}

您可以使用Object.keys()和Object.values()方法分别从该JSON数据中解析标签和数据，以创建图表。

示例

＆＃13;

＆＃13;

var data = {
   "January": 65,
   "February": 59,
   "March": 80,
   "April": 81,
   "May": 56,
   "June": 55
}

const CHART = document.getElementById('lineChart');

var lineChart = new Chart(CHART, {
   type: 'line',
   data: {
      labels: Object.keys(data),
      datasets: [{
         label: 'My first dataset',
         fill: false,
         lineTension: 0,
         backgroundColor: "rgba(75,192,192,0.4)",
         borderColor: "rgba(75,192,192,1)",
         borderCapStyle: 'butt',
         borderDash: [],
         borderDashOffset: 0.0,
         borderJointStyle: 'miter',
         data: Object.values(data)
      }]
   }
})

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.js"></script>
<div class="container">
   <div class="row">
      <div class="col-sm-6">
         <canvas id="lineChart" width="400" height="400"></canvas>
      </div>
      <div class="col-sm-6">
      </div>
   </div>
</div>

＆＃13;

＆＃13;

＆＃13;