Chart.js의 막대 그래프로 색으로 구분하는 방법
9250 단어 chart.js
Chart.js의 막대 그래프는 색으로 구분할 수 없다\(^o^)/
Chart.js는 canvas를 사용한 그래프 그리기 라이브러리입니다.
여기에 온다는 것은 Chart.js를 이미 알고 있으며 막대 그래프로 색으로 구분하는 방법을 알고 싶은 사람이 될 것입니다 (확신
소스 코드를 변경하면 할 수 있었으므로, 변경 장소를 가르칩니다.
완성 미리보기
방법
개량 전
Chart.js
1163 ctx.beginPath();
1164 ctx.fillStyle = this.fillColor;
1165 ctx.strokeStyle = this.strokeColor;
1166 ctx.lineWidth = this.strokeWidth;
|
2002 fillColor : dataset.fillColor,
2004 highlightFill : dataset.highlightFill || dataset.fillColor,
2005 highlightStroke : dataset.highlightStroke || dataset.strokeColor
변경 후 코드
Chart.js
1163 ctx.beginPath();
+- 1164 ctx.fillStyle = this.fillColor[this.index];
+- 1165 ctx.strokeStyle = this.strokeColor[this.index];
1166 ctx.lineWidth = this.strokeWidth;
|
2002 fillColor : dataset.fillColor,
+ 2003 index : index,
2004 highlightFill : dataset.highlightFill || dataset.fillColor,
2005 highlightStroke : dataset.highlightStroke || dataset.strokeColor
막대 색 지정 방법
xxx.js
var ctx = document.getElementById("chart").getContext("2d");
var data = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : [
"rgba(131,185,206,0.5)",
"rgba(131,185,206,0.5)",
"rgba(131,185,206,0.5)",
"rgba(131,185,206,0.5)",
"rgba(246,133,124,0.5)",
"rgba(246,133,124,0.5)",
"rgba(206,195,73,0.5)"
],
strokeColor : [
"rgba(131,185,206,1)",
"rgba(131,185,206,1)",
"rgba(131,185,206,1)",
"rgba(131,185,206,1)",
"rgba(246,133,124,1)",
"rgba(246,133,124,1)",
"rgba(206,195,73,1)"
],
data : [65,59,90,81,56,55,40]
}
]
}
chart = new Chart(ctx).Bar(data);
끝에
처음부터 그 기능
Reference
이 문제에 관하여(Chart.js의 막대 그래프로 색으로 구분하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/tadatti/items/8a132797d2c08a644f42텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)