2014-11-07 3 views
3

JS어떻게 Chart.js

를 사용하여 막대 그래프에서 하나의 컬럼 만의 색상을 변경할 수 있습니다 내가 기본 샘플 사용하고

http://www.chartjs.org/docs/#bar-chart

:

HTML을

<canvas id="canvas" height="450" width="600"></canvas> 

JS

var data = { 
    labels: ["January", "February", "March", "April", "May", "June", "July"], 
    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: [65, 59, 80, 81, 56, 55, 40] 
     } 
    ] 
}; 

window.onload = function(){ 
    var ctx = document.getElementById("canvas").getContext("2d"); 
    window.myBar = new Chart(ctx).Bar(data, { 
     responsive : true 
    }); 
} 

한 열의 색상을 변경하고 싶었습니다. 내가 어떻게 해? 여러 번 튜토리얼을 여러 번 시도했지만 해결책을 찾지 못했습니다. 너 나 좀 도와 줄 수있어?

답변

0

이와 같은 색상을 변경할 수 있습니다. 여기에 a가있다 jsfiddle

var data = { 
    labels: ["January", "February", "March", "April", "May", "June", "July"], 
    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: [65, 59, 80, 81, 56, 55, 40] 
     } 
    ] 
}; 
var ctx = document.getElementById('myChart').getContext('2d'); 
var myChart = new Chart(ctx).Bar(data); 

// change color of first bar 
myChart.datasets[0].bars[0].fillColor = "rgba(255,0,0,1)"; 
myChart.update();