javascript - 如何使用 chartjs.org 使用数组中的数据创建图表？

Question

我尝试创建一个带有条形图的网站。我喜欢用 ChartJs . 有一些很好的例子，但如果数据是数组，我不知道如何可视化数据。

var myArray = [{
        year: '2016',
        value: 5
    },
    {
        year: '2017',
        value: 9
    },
    {
        year: '2018',
        value: 4
    }
];

我如何遍历 myArray 来创建一个像示例中这样的条形图？

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['2016', '2017', '2018'],
        datasets: [{
            label: '# of Votes',
            data: [5, 9, 4],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

感谢您的帮助! 最好的，马吕斯

Answer 1

您可以映射您的对象数组，只获取您需要的值。 我通过
var values = myArray.map((x) => x.value)
然后使用 values 作为值图表选项中的 data 属性。

对于标签，您可以使用相同的逻辑，但使用x.year。

下面的代码代表了一个例子:

var myArray = [{
    year: '2016',
    value: 5
  },
  {
    year: '2017',
    value: 9
  },
  {
    year: '2018',
    value: 4
  }
];

//FILTER THE VALUES
var values = myArray.map((x) => x.value)

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['2016', '2017', '2018'],
    datasets: [{
      label: '# of Votes',
      data: values,
      borderWidth: 1,
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)'
      ],
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="myChart" width="300" height="150"></canvas>

如果出于某种原因(可能是浏览器)，您不能使用箭头函数，那么请使用:
var values = myArray.map(function(x) {return x.value})