问题描述
使用 Chart.js 1.x 我可以创建一个饼图并自动分配颜色:
Using Chart.js 1.x I could create a pie chart and get the colors automatically assigned:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.js"></script>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart").getContext("2d");
var data = [{"label":"Conservative","value":"5"},{"label":"Democratic","value":"6"}];
var myChart = new Chart(ctx).Pie(data);
</script>
</body>
如果我对 v 2.x 做同样的事情
if I do the same with v 2.x
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.js"></script>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart").getContext("2d");{"label":"Democratic","value":"6"}];
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ["Conservative", "Democratic"],
datasets: [{
data: [5, 15],
}]
}
});
</script>
</body>
除非我手动指定颜色，否则整个饼图都显示为灰色；我错过了什么吗?我发现的唯一相关问题是:Chart.js 中的随机填充颜色 但是，如上所述，它在 1.x 上完美运行，所以对我来说似乎很奇怪，它不再工作了.
the whole Pie is displayed in Grey unless I specify the colors manually; am I missing something? The only related question I've found is this one: Random fill colors in Chart.js however, as explained above, it perfectly worked on 1.x so it seems strange to me it doesn't work anymore.
推荐答案
我相信创建配色方案本身就是一门科学.对我来说，Chart.js 中省略了类似的东西是有道理的，因为还有更多的关键目标需要追求.
I believe that creation of color schemes is a whole science of its own. It makes sense to me that something like that has been left out of Chart.js, since there are more critical goals to pursue.
docs 中图表示例中使用的所有颜色均已明确定义.这个两个月大的问题 具有来自图表的分类响应.js 成员，默认颜色在 Chart.js 2 中不可用.
All colors used in chart examples in the docs are defined explicitly. And this two-month-old issue features a categorical response from a Chart.js member that default colors are not available in Chart.js 2.
所以，你有三个选择.
第一选择是自己做一些颜色.我想你不会问这个问题，如果你遇到过这样的事情(我知道结果会很糟糕，如果 我 做了这样的事情).
第二种选择是在网上寻找配色方案和配色方案生成器，然后挑选一些你喜欢的配色方案.
The second choice is to look for color schemes and color scheme generators online and pick some color schemes that please you.
第三个有趣的选择是寻找一个可以随意生成配色方案的 JavaScript 库.
The third and interesting choice is to look for a JavaScript library that can produce color schemes at will.
有几个替代选择.调色板生成器是一个不错的工具，它可以在非常宽松的许可下使用.您可以在 这里看到它在 Chart.js 2 中的作用.该示例也可在下面获得:
There are a couple of alternative choices. A nice one, which is available under very permissive licensing, is the Colour Palette Generator. You may see it in action along Chart.js 2 here. The sample is also available below:
var ctx = document.getElementById("myChart");
var myData = [12, 19, 3, 5, 2, 3];
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ["First", "Second", "Third", "Fourth", "Fifth", "Sixth"],
datasets: [{
label: '# of Votes',
data: myData,
backgroundColor: palette('tol', myData.length).map(function(hex) {
return '#' + hex;
})
}]
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<script src="https://raw.githubusercontent.com/google/palette.js/master/palette.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>这里描述了如何使用该库.简而言之，您可以使用以下方法从特定配色方案创建一个 10 色调色板:
How to use the library is described here. In short, you may create a 10-color palette from a specific color scheme using the following:
var seq = palette('tol-sq', 10);
结果是一个十六进制字符串数组(例如eee8d5").为了在 Chart.js 期望颜色的地方使用它，您可以使用 map 在前面加上#";到每个字符串，就像上面的例子一样.
The result is an array of hex strings (e.g. "eee8d5"). In order to use it where Chart.js is expecting colors, you may use map to prepend "#" to each string, like in the example above.
这篇关于chart.js 2.x 中的自动颜色分配不再起作用，用于 v. 1.x的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！