Javascript Chartjs 为饼图的每个部分提供随机颜色，并从数据库动态获取数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45771849/
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
Chartjs random colors for each part of pie chart with data dynamically from database
提问by Nda.S
I want to set dynamically a color for each part of Pie Chart. Since the chart is dynamically created from database I want for each part that is added to the chart(from database) a different color.
我想为饼图的每个部分动态设置颜色。由于图表是从数据库动态创建的，我希望为添加到图表（来自数据库）的每个部分使用不同的颜色。
I was trying to do this:
我试图这样做：
$(document).ready(function() {
$.ajax({
url: "http://localhost/chartjs/projects_chart.php",
method: "GET",
success: function(data) {
console.log(data);
var ict_unit = [];
var efficiency = [];
var dynamicColors = function() {
var r = Math.floor(Math.random() * 255);
var g = Math.floor(Math.random() * 255);
var b = Math.floor(Math.random() * 255);
return "rgb(" + r + "," + g + "," + b + ")";
};
for (var i in data) {
ict_unit.push("ICT Unit " + data[i].ict_unit);
efficiency.push(data[i].efficiency);
var coloR=dynamicColors();
}
var chartData = {
labels: ict_unit,
datasets: [{
label: 'Efficiency ',
//strokeColor:backGround,
backgroundColor: [coloR],
borderColor: 'rgba(200, 200, 200, 0.75)',
//hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
hoverBorderColor: 'rgba(200, 200, 200, 1)',
data: efficiency
}]
};
var ctx = $("#my-canvas");
var barGraph = new Chart(ctx, {
type: 'pie',
data: chartData
})
},
error: function(data) {
console.log(data);
},
});
});
But I only get one color for the first part of the pie chart.
但我只得到饼图第一部分的一种颜色。
Could you help me?
你可以帮帮我吗？
回答by ?????
You should create a separate array for colors ( just like the ict_unitand efficiency), instead of assigning a random color value each time to the coloRvariable.
您应该为颜色创建一个单独的数组（就像ict_unit和efficiency），而不是每次都为coloR变量分配一个随机颜色值。
Here is the revised version of your code :
这是您的代码的修订版：
$(document).ready(function() {
$.ajax({
url: "https://jsonblob.com/api/jsonBlob/a7176bce-84e0-11e7-8b99-016f34757045",
method: "GET",
success: function(data) {
console.log(data);
var ict_unit = [];
var efficiency = [];
var coloR = [];
var dynamicColors = function() {
var r = Math.floor(Math.random() * 255);
var g = Math.floor(Math.random() * 255);
var b = Math.floor(Math.random() * 255);
return "rgb(" + r + "," + g + "," + b + ")";
};
for (var i in data) {
ict_unit.push("ICT Unit " + data[i].ict_unit);
efficiency.push(data[i].efficiency);
coloR.push(dynamicColors());
}
var chartData = {
labels: ict_unit,
datasets: [{
label: 'Efficiency ',
//strokeColor:backGround,
backgroundColor: coloR,
borderColor: 'rgba(200, 200, 200, 0.75)',
//hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
hoverBorderColor: 'rgba(200, 200, 200, 1)',
data: efficiency
}]
};
var ctx = $("#my-canvas");
var barGraph = new Chart(ctx, {
type: 'pie',
data: chartData
})
},
error: function(data) {
console.log(data);
},
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="my-canvas"></canvas>