如何使用 csv 数据在 Chart.js 中制作不同颜色的条形图？答案

【问题标题】：How to make bars different colours in Chart.js with csv data?如何使用 csv 数据在 Chart.js 中制作不同颜色的条形图？
【发布时间】：2019-06-25 06:34:11
【问题描述】：

所以我试图在条形图上绘制导入的 csv 数据。我想让图表上的每个条形与顶部的相关标签匹配不同的颜色。但是当我尝试为每个条分配某些颜色时，它只会更改每个部分的第一个条。

graph

这是我的图表代码：

var ctx3 = document.getElementById("chart3");
var chart3 = new Chart(ctx3, {
        type: 'bar',
        plugins: [ChartDataSource],
        data: {
            datasets: [{
                backgroundColor: [
                    'rgb(19, 82, 150)',
                    'rgb(196, 230, 255)',
                    'rgb(153, 207, 247)',
                    'rgb(103, 172, 224)',
                    'rgb(19, 82, 150)',
                    'rgb(196, 230, 255)',
                ],
                borderColor: [
                    'transparent',
                    'transparent',
                    'transparent',
                    'transparent',
                    'transparent',
                    'transparent'
                ]
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            },
            layout: {
                padding: {
                    left: 50,
                    right: 50,
                    top: 50,
                    bottom: 50
                }
            },
            plugins: {
                datasource: {
                    url: 'builddata.csv'
                }
            }
        }
    });

【问题讨论】：

标签： javascript csv graph chart.js bar-chart

【解决方案1】：

数据集中的数据需要是每个具有属性的对象数组，请考虑以下几点：

var ctx1 = document.getElementById('chart1').getContext('2d');
var chart1 = new Chart(ctx1, {
  type: 'bar',
  plugins: [ChartDataSource],
  options: {
    plugins: {
      datasource: {
        url: 'https://nagix.github.io/chartjs-plugin-datasource/samples/sample-dataset.xlsx'
      }
    }
  },
  data: {
    datasets: [{
        backgroundColor: 'rgb(19, 82, 150)',
        borderColor: 'transparent'
      },
      {
        backgroundColor: 'rgb(196, 230, 255)',
        borderColor: 'transparent'
      }
    ]
  }
});

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script src="https://cdn.jsdelivr.net/npm/xlsx@0.14.3/dist/xlsx.full.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datasource@0.1.0"></script>
<canvas id="chart1" style="display: block; width: 580px; height: 290px;" width="580" height="290"></canvas>

【讨论】：