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);

끝에



처음부터 그 기능

좋은 웹페이지 즐겨찾기