时间戳

首页 > 解决方案 > 如何使用chartjs.org 使用数组中的数据创建图表？

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

问题描述

我尝试创建一个带有条形图的网站。我喜欢使用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>

谢谢你的帮助！最好的，马吕斯

标签： javascriptarrayschart.js

解决方案

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

对于labels，您可以使用相同的逻辑，但使用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})

推荐阅读