我在我正在进行的项目中使用ChartJS,并且我需要为条形图中的每个条形图使用不同的颜色.
以下是条形图数据集的示例:
var barChartData = {
labels: ["001", "002", "003", "004", "005", "006", "007"],
datasets: [{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: [20, 59, 80, 81, 56, 55, 40]
}]
};
有没有办法以不同方式绘制每个栏？
使用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>
如果我对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>
除非我手动指定颜色,否则整个饼图以灰色显示; 我错过了什么吗？我发现的唯一相关问题是这一个:Chart.js中的随机填充颜色,但是,如上所述,它完全适用于1.x所以我觉得它不再适用了.
我正在尝试使用Chart.js绘制饼图.我的值来自数据库,因此我不知道数据库中会有多少值.在这里,我想为每个值设置一个唯一的颜色.以下是我的例子.
var pieData = [
{
value: 20,
color:"#878BB6"
},
{
value : 40,
color : "#4ACAB4"
},
{
value : 10,
color : "#FF8153"
},
{
value : 30,
color : "#FFEA88"
}
];
var pieOptions = {
segmentShowStroke : false,
animateScale : true
}
var countries= document.getElementById("countries").getContext("2d");
new Chart(countries).Pie(pieData, pieOptions);
目前在上面的示例中,我设置了硬编码值,但在我的示例中,数据(Json)来自DB.