Y-Axis with different colors

问题

I have tried to add different colors to the Y-axis but without success. Is it possible to achive something like attached image shows?

In the chartjs-plugin-annotation plugin you can set the background but not scale colors.

Describing image

        var config = {
            type: 'line',
            data: {
                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                datasets: [{
                    label: 'Dataset',
                    data: [1,2,3,4,5,6,7],
                    fill: false,
                }]
            },
            options: {
                responsive: true,
                scales: {
                    yAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: 'Colored scale'
                        },
                        gridLines: { color: ['rgba(255, 0, 0, 1)', 'rgba(0, 255, 0, 1)', 'rgba(0, 0, 255, 1)']  }
                    }]
                }
            }
        };

        window.onload = function () {
            var ctx = document.getElementById('canvas').getContext('2d');
            window.myLine = new Chart(ctx, config);
        };

<!DOCTYPE html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.min.js"></script>
</head>
<body>
    <div style="width:75%;"><canvas id="canvas"></canvas></div>
</body>

回答1:

In case you want the colored rectangles spread over the entire chart, you can draw individual boxes of different background color using chartjs-plugin-annotation.js.

new Chart(document.getElementById('canvas'), {
  type: 'line',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [{
      label: 'Dataset',
      data: [1, 2, 3, 4, 5, 6, 7],
      fill: false,
      backgroundColor: 'rgb(0, 0, 0)',
      borderColor: 'rgb(0, 0, 0)'
    }]
  },
  options: {
    responsive: true,
    scales: {
      yAxes: [{
        display: true,
        scaleLabel: {
          display: true,
          labelString: 'Colored scale'
        }
      }]
    },
    annotation: {
      annotations: [{
          drawTime: "beforeDatasetsDraw",
          type: "box",
          xScaleID: "x-axis-0",
          yScaleID: "y-axis-0",
          yMin: 4.5,
          yMax: 8,
          backgroundColor: "rgba(255, 0, 0, 1)",
          borderWidth: 0
        },
        {
          drawTime: "beforeDatasetsDraw",
          type: "box",
          xScaleID: "x-axis-0",
          yScaleID: "y-axis-0",
          yMin: 3.5,
          yMax: 4.5,
          backgroundColor: "rgba(255, 165, 0, 1)",
          borderWidth: 0
        },
        {
          drawTime: "beforeDatasetsDraw",
          type: "box",
          xScaleID: "x-axis-0",
          yScaleID: "y-axis-0",
          xMin: 0,
          xMax: 100,
          yMin: 0,
          yMax: 3.5,
          backgroundColor: "rgba(50, 250, 50, 1)",
          borderWidth: 0
        }
      ]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.js"></script>
<canvas id="canvas" height="90">

回答2:

You can draw individual boxes directly on the canvas using the Plugin Core API. The API offers a range of hooks that may be used for performing custom code.

In below code snippet, I use the beforeDraw hook to draw the rectangles of different background color each.

new Chart(document.getElementById('canvas'), {
  type: 'line',
  plugins: [{
    beforeDraw: chart => {
      var ctx = chart.chart.ctx;
      var xAxis = chart.scales['x-axis-0'];
      var yAxis = chart.scales['y-axis-0']; 
      
      ctx.save();      
      
      ctx.fillStyle  = 'green';
      ctx.beginPath();    
      var yGreen = yAxis.getPixelForValue(3.5);
      ctx.fillRect(xAxis.left - 6, yGreen, 6, yAxis.bottom - yGreen);
      ctx.stroke();
      
      ctx.fillStyle  = 'orange';
      ctx.beginPath();    
      var yOrange = yAxis.getPixelForValue(4.5);
      ctx.fillRect(xAxis.left - 6, yOrange, 6, yGreen - yOrange);
      ctx.stroke();
      
      ctx.fillStyle  = 'red';
      ctx.beginPath();
      var yRed = yAxis.getPixelForValue(7);
      ctx.fillRect(xAxis.left - 6, yRed, 6, yOrange- yRed);
      ctx.stroke();
            
      ctx.restore();
    }
  }],
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [{
      label: 'Dataset',
      data: [1, 2, 3, 4, 5, 6, 7],
      fill: false
    }]
  },
  options: {
    responsive: true,
    scales: {      
      yAxes: [{
        gridLines: {
           tickMarkLength: 15
        },
        ticks: {
           padding: 6
        },
        scaleLabel: {
          display: true,
          labelString: 'Colored scale'
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="canvas" height="90">

来源：https://stackoverflow.com/questions/50037683/y-axis-with-different-colors

标签

chart.js