使用不同的顏色在圖表

我的代碼：使用不同的顏色在圖表

<div><canvas id="canvas_line" height="200" width="800"></canvas></div> 

<div><canvas id="canvas_bar" height="200" width="800"></canvas></div> 

<script> 
    var lineChartData = { 
     labels : ["14:00","15:00","16:00","17:00","18:00","19:00","20:00","22:00"], 
     datasets : [ 
      { 
       label: "CPU IDLE", 
       fillColor : "rgba(220,220,220,0.2)", 
       strokeColor : "rgba(220,220,220,1)", 
       pointColor : "rgba(220,220,220,1)", 
       pointStrokeColor : "#fff", 
       pointHighlightFill : "#fff", 
       pointHighlightStroke : "rgba(220,220,220,1)", 
       data : [85,35,65,59,90,81,56,55,40,100] 
      } 
     ] 
    } 

    var barChartData = { 
      labels : ["12:00","13:00","14:00","15:00","16:00","17:00","18:00","19:00","20:00","22:00"], 
      datasets : [ 
       { 
        fillColor : "rgba(220,220,220,0.5)", 
        strokeColor : "rgba(220,220,220,1)", 
        data : [85,35,65,59,90,81,56,55,40,100] 
       } 
      ] 
     } 


     var ctx_line = document.getElementById("canvas_line").getContext("2d"); 
     window.myLine = new Chart(ctx_line).Line(lineChartData, { 
      responsive: true 
     }); 
     var ctx_bar = document.getElementById("canvas_bar").getContext("2d"); 
     window.myLine = new Chart(ctx_bar).Bar(barCharData, { 
      responsive: true 
     }); 
</script>

它看起來像this，一切都是灰色的。

但我想變更下面是應用於LineChart的pointColor和BARCHART的fillcolor到紅色如果它的數據是以上，數據仍然灰暗。

我想要它像this，但我不知道如何在畫布中使用不同的顏色。

<!DOCTYPE html> 
<html> 
<head> 
    <title>123</title> 
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 
    <script type="text/javascript" src="http://apps.bdimg.com/libs/Chart.js/0.2.0/Chart.min.js"></script> 
</head> 
<body> 
<canvas id="chartCanvas" height="200" width="800"></canvas> 
<script> 
$(document).ready(function() { 
     var chartData = { 
     labels: ["12:00","13:00","14:00","15:00","16:00","17:00","18:00","19:00","20:00","22:00"], 
      datasets: [ 
      { 
      data : [85,35,65,59,90,81,56,55,40,100], 
      fillColor: 'rgba(220,220,220,0.2)', 
      strokeColor: 'rgba(220,220,220,1)' 
      } 
     ] 
     } 
     var chartCanvas = document.getElementById("chartCanvas").getContext("2d"); 
     var barChart = new Chart(chartCanvas).Bar(chartData, {responsive: true}); 
     // Set warning color 
     var bars = barChart.datasets[0].bars; 
     for(var i = 0; i < bars.length ; i++) { 
     if(bars[i].value > 80) { 
      bars[i].fillColor = "rgba(255, 0, 0, 0.2)"; 
      bars[i].strokeColor = "rgba(220, 0, 0, 0.5)"; 
     } 
     } 
     // Update the chart 
     barChart.update(); 
}); 
</script> 
</body> 
</html>

來源

2016-05-11 ye shao

你必須循環到圖表的所有的酒吧/分，檢查值超過80，並設置顏色。

這裏是柱狀圖的例子：

var bars = barChart.datasets[0].bars; 
for(var i = 0; i < bars.length; i++) { 
    if(bars[i].value > 80) { 
    bars[i].fillColor = "rgba(255, 0, 0, 0.2)"; 
    bars[i].strokeColor = "rgba(220, 0, 0, 0.5)"; 
    } 
} 
// Update the chart 
barChart.update();

進行工作演示退房this fiddle。

要設置你只需要遍歷點，而不是棒線圖上的顏色：

var points = lineChart.datasets[0].points;

課程，並設置任何你想要的pointColor或。

來源

2016-05-11 13:24:33 Linus

Linus，謝謝！我知道了。但是你的代碼在我的Mac上不起作用。我創建了一個新的html文件並在小提琴上填充了相同的代碼，顏色沒有改變。 –

但小提琴奏效了嗎？你不能只複製它，你必須把它放在一個文件準備回調。 – Linus

「錯誤：123：36未捕獲TypeError：無法讀取未定義的屬性'0'var bars = barChart.datasets [0] .bars;' –

使用不同的顏色在圖表

回答

相關問題