ChartJS - 如何创建图表？

Question

我有一个如下的日期集：

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

如何使用chartjs 和提供的数据创建一个非常简单的图表？我是chartjs的新手，我不知道如何开始:(

我需要在 vuejs 中创建它，非常感谢所有帮助

Answer 1

我编写了一个函数来重新格式化您的数据，以便它可以轻松放入图表中（将不同的值推送到数组中）。

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