如何使chart.js自动添加动态标签的颜色？
如何使chart.js自动添加动态标签的颜色？
提问于 2021-05-22 18:26:01
我目前正在努力使chart.js 2.0自动生成新的颜色的动态标签。用例是，我正在使用数据库中的数据制作饼图，其中每行都是一个新的标签，旁边的计数是数据，例如，每部电影的电影投票。然而，问题是，我不知道会有多少行，因此不能手动输入颜色。我认为解决方案可能是自动生成颜色，然后使用for循环将它们插入其中。这是我的密码：
function getRandomColor() { //generates random colours and puts them in string
var colors = "";
for (var i = 0; i < 3; i++) {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var x = 0; x < 6; x++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
color = "'"+color+"'"+",";
colors += color;
}
colors = colors.slice(0, -1);
console.log(colors);
return colors;
}
const data = {
labels: [
'Red',
'Blue',
'Yellow'
],
datasets: [{
label: 'My First Dataset',
data: [300, 50, 100],
backgroundColor: [
getRandomColor() // calls for 3 random colours
// e.g. returns '#DDA597','#A95647','#78366A'
],
hoverOffset: 4
}]
};我注意到分隔它们的逗号是字符串的一部分，所以它们不能正确地区分颜色。不过，我想不出有什么办法可以绕过这件事。有没有人知道解决这个问题的可能方法。或者更好的解决这个问题的方法。
提前感谢！
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-05-23 03:50:00
如果将值巧妙地推送到数组中，而不是将其推送到字符串中，那么它将很好地工作。
示例：
function getRandomColor() { //generates random colours and puts them in string
var colors = [];
for (var i = 0; i < 3; i++) {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var x = 0; x < 6; x++) {
color += letters[Math.floor(Math.random() * 16)];
}
colors.push(color);
}
return colors;
}
const data = {
labels: [
'Red',
'Blue',
'Yellow'
],
datasets: [{
label: 'My First Dataset',
data: [300, 50, 100],
backgroundColor: getRandomColor(),
hoverOffset: 4
}]
};
const options = {
type: 'pie',
data
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</body>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67655635
复制相关文章
点击加载更多
相似问题
为Chart.js动态添加颜色
Chart.js标签颜色
Chart.js改变标签颜色
如何更改chart.js轴标签的颜色？
Chart.js如何编辑标题标签颜色
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
