javascript - 如何在折线图中添加多种背景颜色

Question

根据我的要求，我想在具有静态背景颜色的折线图中显示没有线条的点。我几乎实现了，但我无法在图表中设置特定的轴背景颜色。我使用了chart.js(折线图)。请看我下面的代码，我尝试了很多请看附图，我想像那个图一样开发(o-10轴1颜色像这样，背景颜色与该轴固定)。

    new Chart(document.getElementById("line-chart"), {
      type: 'line',
      data: {
        labels: [0,10, 20, 30, 40, 50, 60, 70, 80, 90],
        datasets: [{
          data: [0,350, 400, 150, 98, 220, 410],
          label: "Man Engines",
         // borderColor: "#3e95cd",
          backgroundColor: 'rgba(244, 81, 30, 0.8)',
          borderColor: 'rgba(244, 81, 30, 0.8)',
          pointBackgroundColor: 'rgba(244, 81, 30, 0.5)',
          pointBorderColor: 'rgba(244, 81, 30, 0.8)',
          fill: false,
          pointRadius: 5,
          showLine: false
        }
        ]
      },
      options: {
        // title: {
        //   display: true,
        //   text: 'World population per region (in millions)'
        // }, 
        scales: {
          xAxes: [{
            gridLines: {
              drawOnChartArea: false
            },
            // ticks: {
            //   min: 1
            // }
          }],
          yAxes: [{
            gridLines: {
              drawOnChartArea: false
            }
            
          }]
        }
    //     legend: { display: false },
		// fillColor: 'rgba(255, 128, 0, 0.8)',
      }
    });

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

像这样的输出

当前实现的输出

Answer 1

您应该使用type: scatter，而不是使用type: line。

然后您可以使用 chartjs-plugin-annotation.js在图表上绘制单独的框和文本。

new Chart(document.getElementById("line-chart"), {
      type: 'scatter',
      data: {
        datasets: [{
          data: [{x: 3, y: 398}, {x: 5, y: 350}, {x: 12, y: 396}, {x: 20, y: 160}, {x: 25, y: 100}, {x: 30, y: 195} ],
          label: "Man Engines",
          borderColor: 'rgba(244, 81, 30, 0.8)',
          pointBackgroundColor: 'rgba(0, 0, 0, 1)',
          pointBorderColor: 'rgba(244, 81, 30, 0.8)',
          pointRadius: 5
        }
        ]
      },
      options: {
        legend: {
          display: false
        },
        scales: {
          xAxes: [{
            scaleLabel: {
              display: true,
              labelString: 'BN [mgKOH/g]',
              fontStyle: 'bold'
            },
            gridLines: {
              drawOnChartArea: false
            },
            ticks: {
              min: 0,
              max: 70,
              stepSize: 10
            }
          }],
          yAxes: [{
            scaleLabel: {
              display: true,
              labelString: 'Iron (Fe) total [mg/kg]',
              fontStyle: 'bold'
            },
            gridLines: {
              drawOnChartArea: false
            },
            ticks: {
              min: 0,
              max: 500,
              stepSize: 100
            }
          }]
        },
        annotation: {
          events: ["click"],
          annotations: [       
            {
              drawTime: "beforeDatasetsDraw",
              type: "box",
              xScaleID: "x-axis-1",
              yScaleID: "y-axis-1",
              xMin: 0,
              xMax: 100,
              yMin: 0,
              yMax: 500,
              backgroundColor: "rgba(212, 0, 0, 0.8)",
              borderWidth: 0
            },
            {
              drawTime: "beforeDatasetsDraw",
              type: "box",
              xScaleID: "x-axis-1",
              yScaleID: "y-axis-1",
              xMin: 10,
              xMax: 100,
              yMin: -10,
              yMax: 300,
              backgroundColor: "rgba(255, 255, 0, 0.8)",
              borderColor: "rgba(255, 128, 0, 0.5)",
              borderWidth: 6
            },
            {
              drawTime: "beforeDatasetsDraw",
              type: "box",
              xScaleID: "x-axis-1",
              yScaleID: "y-axis-1",
              xMin: 15,
              xMax: 45,
              yMin: -10,
              yMax: 200,
              backgroundColor: "rgba(0, 128, 0, 0.8)",
              borderColor: "rgba(128, 255, 0, 0.5)",
              borderWidth: 6
            },
            {
            drawTime: "afterDatasetsDraw",
            type: 'line',
              mode: 'horizontal',
              scaleID: 'y-axis-1',
              value: 400,
              borderColor: 'rgba(0, 0, 0, 0)',
              borderWidth: 0,
              label: {
                fontStyle: 'normal',
                fontSize: 18,
                fontColor: 'white',
                backgroundColor: 'rgba(0, 0, 0, 0)',
                content: "Danger - Do not operate in this area",
                enabled: true
              }
            },
            {
            drawTime: "afterDatasetsDraw",
            type: 'line',
              mode: 'horizontal',
              scaleID: 'y-axis-1',
              value: 250,
              borderColor: 'rgba(0, 0, 0, 0)',
              borderWidth: 0,
              label: {
                xAdjust: 40,
                fontStyle: 'normal',
                fontSize: 18,
                fontColor: 'black',
                backgroundColor: 'rgba(0, 0, 0, 0)',
                content: "Alert area - Adjustment of feed rate may be needed",
                enabled: true
              }
            },
            {
            drawTime: "afterDatasetsDraw",
            type: 'line',
              mode: 'horizontal',
              scaleID: 'y-axis-1',
              value: 150,
              borderColor: 'rgba(0, 0, 0, 0)',
              borderWidth: 0,
              label: {
                xAdjust: -50,
                fontStyle: 'normal',
                fontSize: 18,
                fontColor: 'white',
                backgroundColor: 'rgba(0, 0, 0, 0)',
                content: "Save area",
                enabled: true
              }
            }
          ]
        }
      }
    });

<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="line-chart"></canvas>