Question

我正在使用chart.js创建一个图形，该图形在x轴上具有2个系列（count1和count2）和多个标签。

对于该系列，我已经创建了2个数据集，但是当我设置标签时，只有第一个标签使用2种颜色创建，其余的使用默认颜色。

如何使所有条形都采用数据集系列的颜色？

到目前为止，这是我所做的：

var ctx = document.getElementById("myChart")

var myChart = new Chart(ctx, {
	type: "bar",
  data: {
  labels: ['Product 1','Product 2','Product 3','Product 4','Product 5','Product 6'],
    datasets: [{
      label: 'Count 1',
      data: [10,2,2,2,0,1],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)'
      ]
    }, {
      label: 'Count 2',
      data: [10,5,1,0,5,4],
      backgroundColor: [
        'rgba(54, 162, 235, 0.2)'
      ]
    }]
  },
  options: {
    scales: {
      xAxes: [{
        stacked: true
      }],
      yAxes: [{
        stacked: true,
      }]
    }
  }
});

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
</head>

<canvas id="myChart"></canvas>

JsFiddle中的示例：

https://jsfiddle.net/espinoza/uzjyrfv2/

Answer 1

我的数据集的颜色在方括号内，这导致它被当作一个数组，我只留下了值。

希望这对其他人有帮助。

              
var ctx = document.getElementById("myChart")

var myChart = new Chart(ctx, {
	type: "bar",
  data: {
  labels: ['Product 1','Product 2','Product 3','Product 4','Product 5','Product 6'],
    datasets: [{
      label: 'Count 1',
      data: [10,2,2,2,0,1],
      backgroundColor: 
        'rgba(255, 99, 132, 0.2)'
    }, {
      label: 'Count 2',
      data: [10,5,1,0,5,4],
      backgroundColor: 
        'rgba(54, 162, 235, 0.2)'
    }]
  },
  options: {
    scales: {
      xAxes: [{
        stacked: true
      }],
      yAxes: [{
        stacked: true,
      }]
    }
  }
});

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
</head>

<canvas id="myChart"></canvas>

JsFiddle中的附加链接

https://jsfiddle.net/espinoza/uzjyrfv2/1/

如何为chart.js中的堆叠条形图的所有标签创建数据集？

1 个答案: