使用 Chartjs 绘制两个具有透明度的图

在 Chartjs 中我有两个图，如图所示 https://codepen.io/anon/pen/XgGKqR:

        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);  

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

你需要设置fill财产给false对于第一个数据集（red一），使其透明。

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

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

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

这里是工作代码笔 https://codepen.io/gaand/pen/Qgogpe?editors=0010