Question

我在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”，但是会中断。请指出我在正确的方向？

Answer 1

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

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

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

ChartJS 2行每个都有不同的填充梯度

1 个答案: