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

【问题标题】：How do I use ChartJS with a background color in the space between two line charts?如何在两个折线图之间的空间中使用带有背景颜色的 ChartJS？
【发布时间】：2016-07-27 02:19:13
【问题描述】：

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

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

最小值/最大值之间的区域是唯一需要填充的位，最小值/最大值线之外的区域应保持空白。

ChartJS 可以做到吗？

谢谢肖蒂

【问题讨论】：

如果你展示一个小例子来绘制该图表减去你正在尝试做的填充的事情会很有帮助
我有，看上图。上图是我想要制作的。

标签： javascript html chart.js

【解决方案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>

【讨论】：

我听说过，但是这是一个继承项目，已经广泛使用 Chart.JS，不过我会记住这一点。

【解决方案2】：

取自另一个答案，但更接近您想要的。（颜色只在中间）。所以基本上，在 ChartJS 中你需要覆盖 2 个填充的折线图，并将底部的一个设为白色。（遗憾的是它覆盖了网格线）

$(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>

【讨论】：

谢谢，我稍后再试。