如何在两个折线图之间的空间中使用带有背景色的ChartJS？

Question

我想创建一个类似于以下ChartJS的图表。 它是2个折线图，但两条折线之间的空间已填满。

X轴是每个样品的时间，y轴是当时记录的最低和最高温度。

最小值/最大值之间的区域是唯一需要填充的位，最小值/最大值行以外的区域应保持未填充状态。

ChartJS有可能吗？

谢谢肖蒂

Answer 1

你知道hicgcharts吗

 $(function () { $('#container').highcharts({ chart: { type: 'area' }, title: { text: 'Temp' }, xAxis: { categories: ['1pm', '2pm', '3pm', '4pm', '5pm'] }, credits: { enabled: false }, colors: [ '#910000', '#00FFFF'], series: [{ name: 'Max Temp', data: [5, 3, 4, 7, 2] }, { name: 'Min Temp', data: [2, 2, 3, 2, 1] }] }); }); 

 <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 

Answer 2

来自另一个答案，但更接近您想要的。 （仅中间颜色）。 因此，基本上， 在ChartJS中，您需要覆盖2个填充的折线图，并使底部的1个变为白色 。 （不幸的是，它覆盖了网格线）

 $(function () { $('#container').highcharts({ chart: { type: 'area' }, title: { text: 'Temp' }, xAxis: { categories: ['1pm', '2pm', '3pm', '4pm', '5pm'] }, credits: { enabled: false }, colors: [ '#910000', '#FFFFFF'], series: [{ name: 'Max Temp', data: [5, 3, 4, 7, 2] }, { name: 'Min Temp', data: [2, 2, 3, 2, 1] }] }); }); 

 .highcharts-series-1 path{fill-opacity:1!important} 

 <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>