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数据解析标签和数据，以创建图表。

例

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) 
 
     }] 
 
    } 
 
})

<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>