使用 chartjs 以透明方式绘制两个图

Question

在 Chartjs 中，我有两个图，如下所示：

        var config = {
            type: 'line',
            data: {
                labels: [
                    "2017-07-03T01:05:00+0100",
                    ....

                ],


            datasets: [


                {
                    label: "Consumption",
                    fill: 'origin',
                    pointRadius: 0,
                    borderColor: "#0000ff",
                    backgroundColor: "rgba(255,10,13,255)",
                    data: [


                    0.015625,
                    0.0199861111111,
                    ...

                    ],
                }
                ,
                {
                    fill: 'origin',   
                    label: "PV",
                    pointRadius: 0,
                    borderColor: "#ebf909",
                    backgroundColor: "rgba(29,241,13,210)", 
                    data: [

                    0.0,

                    .....

                    ],
                }




                ]
            },
            options: {

                responsive: true,
                title:{
                    display:true,
                    text:"Chart.js Line Chart - Stacked Area"
                },
                tooltips: {
                    mode: 'index',
                },
                hover: {
                    mode: 'index'
                },
                scales: {
                    xAxes: [{
                        scaleLabel: {
                            display: true,
                            labelString: 'Time'
                        }
                    }],
                    yAxes: [{
                        stacked: false,
                        scaleLabel: {
                            display: true,
                            labelString: 'kWh'
                        }
                    }]
                }
            }
        };



var ctx = document.getElementById("canvas").getContext("2d");
var myChart  = new Chart(ctx, config);  

有什么办法可以让绿色情节通过红色情节在后者完全掩盖前者的地方显示出来？

Answer 1

您需要为第一个数据集（红色数据集）设置fill属性以使其透明。false

datasets: [{
         label: "Consumption",
         fill: false,
         pointRadius: 0,
         borderColor: "#0000ff",
         backgroundColor: "rgba(255,10,13,255)",
         ...

或者，您也可以降低背景颜色的不透明度，就像这样......

backgroundColor: "rgba(255, 10, 13, 0.1)"

这是工作代码笔