javascript - Chart.js：条形图多种颜色

Question

有没有办法拥有多种颜色？

例子：

谢谢！

标签： javascriptchart.js

Answer 1

新答案：

我最初的回答困扰着我，我认为必须有更好的方法来实现这种风格。所以这里有一个更好的解决方案，它使用径向渐变。

请注意，此实现非常幼稚，因为它仅支持单个数据集！

const colours = [
  { primary: '#fec1c6', shadow: '#e8b0b5' },
  { primary: '#bdeeed', shadow: '#aad2d0' },
  { primary: '#e4da84', shadow: '#d3ca76' }
];

new Chart(document.getElementById('chart'), {
  type: 'doughnut',
  data: {
    datasets: [{
      data: [3, 2, 2]
    }]
  },
  options: {
    cutoutPercentage: 65
  },
  plugins: [{
    beforeDatasetsUpdate: c => {
      const x = (c.chartArea.right + c.chartArea.left) / 2,
        y = (c.chartArea.bottom + c.chartArea.top) / 2,
        bgc = [];

      for (let i = 0; i < colours.length; i++) {
        const gradient = c.ctx.createRadialGradient(x, y, c.innerRadius, x, y, c.outerRadius);

        gradient.addColorStop(0, colours[i].shadow);
        gradient.addColorStop(.4, colours[i].shadow);
        gradient.addColorStop(.45, colours[i].primary);
        gradient.addColorStop(1, colours[i].primary);

        bgc.push(gradient);
      }
      c.config.data.datasets[0].backgroundColor = bgc;
    }
  }]
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart" height="75"></canvas>

---

原答案：

如果您不介意“肮脏”的解决方案，您可以通过复制数据集来获得类似的视觉效果，例如：

const values = [3, 2, 2],
  primaryColours = ['#fec1c6', '#bdeeed', '#e4da84'],
  secondaryColours = ['#e8b0b5', '#aad2d0', '#d3ca76'];

new Chart(document.getElementById('chart'), {
  type: 'doughnut',
  data: {
    datasets: [{
      data: values,
      weight: 2,
      backgroundColor: primaryColours,
      borderColor: primaryColours
    }, {
      data: values,
      weight: 1,
      backgroundColor: secondaryColours,
      borderColor: secondaryColours
    }]
  },
  options: {
    cutoutPercentage: 65
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart" height="75"></canvas>