Question

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

这是我的图形代码：

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'
                }
            }
        }
    });

Answer 1

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

dbconsole/login.jsp

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'
      }
    ]
  }
});

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

1 个答案: