私は2つのプロット、<a href="https://codepen.io/anon/pen/XgGKqR" rel="nofollow noreferrer">as shown here</a>持っChartjsで透明性

Question

で互いの上chartjsを使用して2つのプロットを描く：

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

すると、私は完全に後者の場所で赤1を通じて緑のプロットショーを行うことができますどのような方法があります前者をあいまいにする？

Answer 1

あなたはそれを透明にするために、最初のデータセット（赤 1）のためにfalseにfillプロパティを設定する必要があります。

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

か、あなたもそうのように、背景色の不透明度を減らすことができます...ここで

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

は0の不透明度使用working codepen