Question

我的代码：

<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更改为红色如果其数据高于 80 ， 80 以下的数据仍为灰色。

我希望它像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>

Answer 1

您必须循环到图表的所有条形图/点，检查值是否超过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或任何你想要的。

在图表

1 个答案: