작업중인 프로젝트에서 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]
}]
};
각 막대를 다르게 칠할 수있는 방법이 있습니까?
답변
v2부터는 backgroundColor속성을 통해 각 막대의 색상에 해당하는 값 배열을 간단히 지정할 수 있습니다 .
datasets: [{
label: "My First dataset",
data: [20, 59, 80, 81, 56, 55, 40],
backgroundColor: ["red", "blue", "green", "blue", "red", "blue"],
}],
이 또한 가능하다 borderColor, hoverBackgroundColor, hoverBorderColor.
Bar Chart Dataset Properties 에 대한 문서에서 :
일부 속성은 배열로 지정할 수 있습니다. 이러한 값이 배열 값으로 설정되면 첫 번째 값은 첫 번째 막대에 적용되고 두 번째 값은 두 번째 막대에 적용되는 식입니다.
답변
해결 방법 : update 메서드를 호출하여 새 값을 설정합니다.
var barChartData = {
labels: ["January", "February", "March"],
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]
}
]
};
window.onload = function(){
var ctx = document.getElementById("mycanvas").getContext("2d");
window.myObjBar = new Chart(ctx).Bar(barChartData, {
responsive : true
});
//nuevos colores
myObjBar.datasets[0].bars[0].fillColor = "green"; //bar 1
myObjBar.datasets[0].bars[1].fillColor = "orange"; //bar 2
myObjBar.datasets[0].bars[2].fillColor = "red"; //bar 3
myObjBar.update();
}
답변
Chart.Bar.js 파일을 살펴본 후 솔루션을 찾았습니다. 이 함수를 사용하여 임의의 색상을 생성했습니다.
function getRandomColor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
파일 끝에 추가했고이 함수를 “fillColor :”아래에서 바로 호출했습니다.
helpers.each(dataset.data,function(dataPoint,index){
//Add a new point for each piece of data, passing any required data to draw.
이제 다음과 같이 보입니다.
helpers.each(dataset.data,function(dataPoint,index){
//Add a new point for each piece of data, passing any required data to draw.
datasetObject.bars.push(new this.BarClass({
value : dataPoint,
label : data.labels[index],
datasetLabel: dataset.label,
strokeColor : dataset.strokeColor,
fillColor : getRandomColor(),
highlightFill : dataset.highlightFill || dataset.fillColor,
highlightStroke : dataset.highlightStroke || dataset.strokeColor
}));
},this);
그리고 그것은 각 막대에 대해 다른 색상을 얻습니다.
답변
Chart.js 를 기반으로 하는 라이브러리 ” ChartNew “를 살펴보면 다음과 같이 값을 배열로 전달하여이를 수행 할 수 있습니다.
var data = {
labels: ["Batman", "Iron Man", "Captain America", "Robin"],
datasets: [
{
label: "My First dataset",
fillColor: ["rgba(220,220,220,0.5)", "navy", "red", "orange"],
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: [2000, 1500, 1750, 50]
}
]
};
답변
각 막대에 대해 임의의 색상을 생성하는이 함수를 호출 할 수 있습니다.
var randomColorGenerator = function () {
return '#' + (Math.random().toString(16) + '0000000').slice(2, 8);
};
var barChartData = {
labels: ["001", "002", "003", "004", "005", "006", "007"],
datasets: [
{
label: "My First dataset",
fillColor: randomColorGenerator(),
strokeColor: randomColorGenerator(),
highlightFill: randomColorGenerator(),
highlightStroke: randomColorGenerator(),
data: [20, 59, 80, 81, 56, 55, 40]
}
]
};
답변
여기서는 두 가지 기능을 만들어이 문제를 해결했습니다.
1. dynamicColors () 임의의 색상 생성
function dynamicColors() {
var r = Math.floor(Math.random() * 255);
var g = Math.floor(Math.random() * 255);
var b = Math.floor(Math.random() * 255);
return "rgba(" + r + "," + g + "," + b + ", 0.5)";
}
2. poolColors ()를 사용하여 색상 배열 생성
function poolColors(a) {
var pool = [];
for(i = 0; i < a; i++) {
pool.push(dynamicColors());
}
return pool;
}
그럼 그냥 통과 해
datasets: [{
data: arrData,
backgroundColor: poolColors(arrData.length),
borderColor: poolColors(arrData.length),
borderWidth: 1
}]
답변
2019 년 8 월부터 Chart.js에는이 기능이 내장되어 있습니다.
backgroundColor에 배열을 제공하기 만하면됩니다.
https://www.chartjs.org/docs/latest/getting-started/ 에서 가져온 예
전에:
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My First dataset',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: [0, 10, 5, 2, 20, 30, 45]
}]
},
후:
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My First dataset',
backgroundColor: ['rgb(255, 99, 132)','rgb(0, 255, 0)','rgb(255, 99, 132)','rgb(128, 255, 0)','rgb(0, 255, 255)','rgb(255, 255, 0)','rgb(255, 255, 128)'],
borderColor: 'rgb(255, 99, 132)',
data: [0, 10, 5, 2, 20, 30, 45]
}]
},
방금이 방법을 테스트했는데 작동합니다. 막대마다 색상이 다릅니다.
