javascript - 如何使用csv数据在Chart.js中使条形不同颜色？

所以我试图在条形图上绘制导入的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'
                }
            }
        }
    });

最佳答案

数据集中需要是具有属性的对象数组的数据，请考虑以下事项：

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>

关于javascript - 如何使用csv数据在Chart.js中使条形不同颜色？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56748090/