Question

我试图在Y轴上添加不同的颜色，但没有成功。是否有可能像附加的图像显示那样？

在chartjs-plugin-annotation插件中，您可以设置背景但不能缩放颜色。

        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>

Answer 1

如果您希望彩色矩形分布在整个图表中，则可以使用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">

Answer 2

您可以使用Plugin Core API直接在画布上绘制各个框。该API提供了一系列可用于执行自定义代码的挂钩。

在下面的代码片段中，我使用SC_CPLUSPLUS钩子分别绘制背景颜色不同的矩形。

beforeDraw

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'
        }
      }]
    }
  }
});

Y轴有不同的颜色

2 个答案: