ChartJS - 如何創建圖表？

Question

我有一個如下的日期集：

[
    [
        1446940800, //week in epoch
        705077, //additions
        -279 //delitions
    ],
    [
        1447545600,
        7069,
        -5261
    ],
    [
        1448150400,
        13874,
        -11025
    ],
]

如何使用提供數據的chartjs創建一個非常簡單的圖表？ 我是chartjs的新手，我不知道如何開始:(

我需要在 vuejs 中創建它，非常感謝所有幫助

Answer 1

我寫了一個 function 來重新格式化您的數據，以便它可以輕松地放入圖表中（將不同的值推送到數組中）。

 const data = [ [ 1446940800, //week in epoch 7050, //additions -279 //delitions ], [ 1447545600, 7069, -5261 ], [ 1448150400, 13874, -11025 ], ]; function reformatdata(datapoints) { const reformatted = { weeks: [], additions: [], deletions: [], } for (let i = 0; i < datapoints.length; i++) { reformatted.weeks.push(datapoints[i][0]); reformatted.additions.push(datapoints[i][1]); reformatted.deletions.push(datapoints[i][2]); } return reformatted; } const chartdata = reformatdata(data); console.log(chartdata);

使用 Chart.js 可以很容易地創建不同類型的圖表來顯示數據，我以折線圖為例。 也不要忘記在 html 文件中包含指向 Chart.js 的 CDN 鏈接或下載的庫的鏈接。

 // code for the line chart var ctx = document.getElementById('myLineChart').getContext('2d'); var chart = new Chart(ctx, { // The type of chart we want to create type: 'line', // The data for our dataset data: { labels: chartdata.weeks, // the weeks as x axis labels and values datasets: [{ // y axis labels and values label: 'Additions', borderColor: 'rgb(255, 99, 132)', data: chartdata.additions // additions }, { label: 'Deletions', borderColor: 'rgb(132, 99, 255)', data: chartdata.deletions // deletions }] }, });

 <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script> <canvas id="myLineChart"></canvas>

這對於每種圖表類型都是相同的，例如，這是條形圖的代碼。 請注意，我將borderColor更改為backgroundcolor以獲得更好的可視化效果。

 // code for the bar chart var ctx = document.getElementById('myBarChart').getContext('2d'); var chart = new Chart(ctx, { // The type of chart we want to create type: 'bar', // The data for our dataset data: { labels: chartdata.weeks, datasets: [{ label: 'Additions', backgroundColor: 'rgb(255, 99, 132)', data: chartdata.additions }, { label: 'Deletions', backgroundColor: 'rgb(132, 99, 255)', // changed border to bgcolor data: chartdata.deletions }] }, });

 <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script> <canvas id="myBarChart"></canvas>

那里有很多信息，也許檢查所有不同的可能性和設置會很有趣。

演示鏈接： jsfiddle