使用Chart.js1.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>
如果我对v2.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>
除非我手动指定颜色,否则整个饼图显示为灰色;我是否遗漏了什么?我找到的唯一相关问题是:Random fill colors in Chart.js然而,如上所述,它在1.x上完美地工作,所以对我来说它不再工作似乎很奇怪。
4条答案
按热度按时间r7knjye21#
我相信配色方案的创建本身就是一门完整的科学。对我来说,Chart.js没有考虑到这一点是有道理的,因为还有更关键的目标需要追求。
docs中图表示例中使用的所有颜色都是显式定义的。并且this two-month-old issue具有来自Chart.js成员的分类响应,即默认颜色在Chart.js 2中不可用。
你有三个选择。
有几个替代选择。一个不错的选择是Colour Palette Generator,它在非常宽松的许可下提供。您可以在Chart.js 2 here中看到它的运行情况。下面也提供了该示例:
第一个
here介绍了如何使用该库。简而言之,您可以使用以下方法从特定配色方案创建10色调色板:
结果是一个十六进制字符串数组(例如“eee8d5”)。为了在Chart.js需要颜色的地方使用它,您可以使用
map
在每个字符串前面加上“#”,就像上面的例子一样。velaa5lx2#
我实际上会推荐ChartsJS-Plugin-ColorSchemes。简单地在chartjs之后导入它就足以让你有自动着色,但是添加选项将允许你制作自定义调色板,例如。
gorkyyrv3#
为
Chart.js
添加自动颜色生成的另一种方法是使用插件:chartjs-plugin-autocolors
注意:此插件需要Chart.js 3.0或更高版本
n9vozmp44#
随机颜色动态图
当数据和标签是动态时