chart.js 2.x中的自动颜色分配不再起作用，用于1.x版中 [英] Automatic colors assignment in chart.js 2.x doesn't work anymore, used to work in v. 1.x
问题描述
使用Chart.js 1.x，我可以创建一个饼图并获得自动分配的颜色：
< 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：保守， value： 5}，{ label：民主， value： 6}]];
var myChart = new Chart（ctx）.Pie（data）;
< / script>
< / body>
如果我对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 =新图表（ctx，{
类型：'pie'，
数据：{
标签：[保守，民主]，
数据集：[{
数据：[5，15]，
}]
}
}）；
< / script>
< / body>
除非我手动指定颜色，否则整个Pie将显示为灰色。我错过了什么吗？我发现的唯一相关问题就是这个问题： Chart.js中的随机填充颜色但是，如上所述，它完全可以在1.x上运行，所以对我来说，它不再起作用了。
文档。而且，这个已经存在两个月的问题具有对图表的明确响应。 js成员认为Chart.js 2中没有默认颜色。
因此，您有三个选择。
-
首选是自己制作一些颜色。我想您是否会问过这样的问题，如果您陷入这样的问题（我知道如果 I 做这样的事情，结果将是可怕的）。
-
第二个选择是在线查找配色方案和配色方案生成器，并选择一些令您满意的配色方案。
-
第三个有趣的选择是寻找一个可以随意生成配色方案的JavaScript库。
有两种选择。 颜色调色板生成器是一个很好的方法，可以在非常宽松的许可下获得。您可能会在Chart.js 2的此处看到它的运行。该示例也可以在下面找到：
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，第四，第五，第六]，
数据集：[{
标签：投票数，
数据：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色调色板：
var seq = palette（'tol-sq' ，10）;
结果是十六进制字符串数组（例如 eee8d5）。为了在Chart.js期望使用颜色的地方使用它，您可以使用 map 在＃之前加上像上面的示例一样。
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>
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>
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.
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.
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.
So, you have three choices.
The first choice is to make some colors yourself. I guess you would not have asked the question, had you been into something like that (I know that the results would be horrible, if I did something like that).
The second choice is to look for color schemes and color scheme generators online and pick some color schemes that please you.
The third and interesting choice is to look for a JavaScript library that can produce color schemes at will.
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>
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);
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中的自动颜色分配不再起作用，用于1.x版中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
