ChartJS 2 行，每行都有不同的填充渐变答案

【问题标题】：ChartJS 2 lines each with different fill gradientsChartJS 2 行，每行都有不同的填充渐变
【发布时间】：2019-01-19 05:22:40
【问题描述】：

我在 Ionic 3/Angular 4 应用程序中有 ChartJS 2.6 版。在我的折线图配置中，我有 2 个数据集。我一直试图让两条线都有自己的填充渐变。

我需要这样的东西：

但到目前为止，我只管理过这样的事情：

无论我尝试什么，我的第一个数据集图表总是超过第二个。就像它隐藏了第二个一样。

这是我正在尝试的图表配置：

let chart = this.lineCanvas.nativeElement.getContext('2d'),
    gradientSys = chart.createLinearGradient(0, 200, 0, 0);

    gradientSys.addColorStop(0.4, 'rgba(49, 218, 11, 1)');
    gradientSys.addColorStop(0.7, 'rgba(218, 129, 11, 1)');
    gradientSys.addColorStop(1.0, 'rgba(218, 11, 11, 1)');

    let gradientDia = chart.createLinearGradient(0, 120, 0, 0);

    gradientDia.addColorStop(0.4, 'rgba(49, 218, 11, 1)');
    gradientDia.addColorStop(0.6, 'rgba(218, 129, 11, 1)');
    gradientDia.addColorStop(1.0, 'rgba(218, 11, 11, 1)');

    this.chartConfig = {
        type: 'line',

        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        min: 0,
                        callback: function (value, index, values) {
                            if (Math.floor(value) === value) {
                                return value;
                            }
                        }
                    }
                }]
            }
        },

        data: {
            labels: [],
            datasets: [
                {
                    label: 'Systolic',
                    fill: true,
                    lineTension: 0.1,
                    backgroundColor: gradientSys,
                    borderColor: "rgba(115, 115, 115, 1)",
                    borderCapStyle: 'butt',
                    borderDash: [],
                    borderDashOffset: 1.0,
                    borderJoinStyle: 'miter',
                    pointBorderColor: "rgba(115, 115, 115, 1)",
                    pointBackgroundColor: "#fff",
                    pointBorderWidth: 1,
                    pointHoverRadius: 5,
                    pointHoverBackgroundColor: "rgba(115, 115, 115, 1)",
                    pointHoverBorderColor: "rgba(115, 115, 115, 1)",
                    pointHoverBorderWidth: 2,
                    pointRadius: 3,
                    pointHitRadius: 10,
                    spanGaps: false,
                    data: []
                },
                {
                    label: 'Diastolic',
                    fill: true,
                    lineTension: 0.1,
                    backgroundColor: gradientDia,
                    borderColor: 'rgba(115, 115, 115, 1)',
                    borderCapStyle: 'butt',
                    borderDash: [],
                    borderDashOffset: 1.0,
                    borderJoinStyle: 'miter',
                    pointBorderColor: 'rgba(115, 115, 115, 1)',
                    pointBackgroundColor: "#fff",
                    pointBorderWidth: 1,
                    pointHoverRadius: 5,
                    pointHoverBackgroundColor: 'rgba(115, 115, 115, 1)',
                    pointHoverBorderColor: 'rgba(115, 115, 115, 1)',
                    pointHoverBorderWidth: 2,
                    pointRadius: 3,
                    pointHitRadius: 10,
                    spanGaps: false,
                    data: []
                }
            ]
        }
    };

data [] 值在那里是空的，因为我稍后在从数据库中获取它们之后设置它们。我试图将第一个数据集的填充值设置为“-1”，但这会中断。请在这里指出正确的方向？

【问题讨论】：

您是否尝试过交换dataset 中的两个数组条目？目前尚不清楚您显示的第二张图片是收缩压还是舒张压，但如果是后者，我猜这是因为条目 1 将绘制在条目 0 上。如果收缩压总是较低，则将其设为最后一个条目，所以它是最后绘制的？
您可以考虑的另一件事是创建两个相互重叠的图表对象，因此如果翻转数据顺序没有帮助，请创建两个图表以便翻转图表 z-index而是。
你好@halfer 非常感谢你！ Systolic 是对的，是的，当交换它工作的数据集时！
不客气，拜托这行得通 - 这是一个猜测！我已经写在下面了。

标签： angular ionic-framework chart.js

【解决方案1】：

我们在 cmets 中讨论了两种可能的解决方案。

有效的选项只是颠倒渲染顺序：只需将datasets[0] 与datasets[1] 交换（反之亦然）就可以了。我希望这里的 JavaScript 库将一个图绘制在另一个之上，因此如果一个图总是较大，则需要先绘制它。

如果这不起作用，可以考虑的另一个选择是创建两个单独的图形对象，并将它们映射到两个完全重叠的 DOM 元素。如果图形对象在每种情况下都是透明的（即背景没有填充颜色），那么这可能有效。

【讨论】：