Javascript chart.js 2.x 中的自动颜色分配不再起作用，以前在 v. 1.x 中起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39871319/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Automatic colors assignment in chart.js 2.x doesn't work anymore, used to work in v. 1.x
提问by Eugenio
Using Chart.js 1.x I could create a pie chart and get the colors automatically assigned:
使用 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":"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
如果我对 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.jshowever, as explained above, it perfectly worked on 1.x so it seems strange to me it doesn't work anymore.
除非我手动指定颜色，否则整个 Pie 都以灰色显示；我错过了什么吗？我发现的唯一相关问题是：Chart.js 中的随机填充颜色但是，如上所述，它在 1.x 上完美运行，所以对我来说似乎很奇怪它不再起作用了。
回答by xnakos
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 docsare defined explicitly. And this two-month-old issuefeatures 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 Idid 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:
我相信创建配色方案是一门完整的科学。对我来说，Chart.js 中遗漏了类似的东西是有道理的，因为有更重要的目标要追求。文档中图表示例中使用的所有颜色都是明确定义的。而这两个月之久的问题带有特色chart.js之构件，其默认的颜色不是chart.js之2，所以可用一个明确的回应，你有三种选择。第一个选择是自己制作一些颜色。我想你不会问这个问题，如果你是这样的（我知道结果会很糟糕，如果我做了类似的事情）。第二种选择是在线寻找配色方案和配色方案生成器，并选择一些让您满意的配色方案。第三个有趣的选择是寻找一个可以随意生成配色方案的 JavaScript 库。有几个替代选择。Color Palette Generator是一个不错的选择，它可以在非常宽松的许可下使用。您可以在此处看到它在 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", "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:
此处描述了如何使用该库。简而言之，您可以使用以下方法从特定的配色方案创建一个 10 色的调色板：
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 mapto prepend "#" to each string, like in the example above.
结果是一个十六进制字符串数组（例如“eee8d5”）。为了在 Chart.js 需要颜色的地方使用它，您可以使用map在每个字符串前面加上“#”，就像上面的例子一样。
回答by SARose
I would actually recommend ChartsJS-Plugin-ColorSchemes. Simply importing it after chartjs will be enough for you to have automatic coloring but adding options will allow you to make custom palettes, for example.
我实际上会推荐ChartsJS-Plugin-ColorSchemes。简单地在 chartjs 之后导入它就足以让您自动着色，但添加选项将允许您制作自定义调色板，例如。
...
options: {
plugins: {
colorschemes: {
scheme: 'tableau.Tableau20'
}
}
}
