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

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: line ，你应该使用type: scatter 。

然后，您可以使用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>