グラフJsグラフのグラフの凡例のボックスをグラフの線のスタイルで更新する

Question

私のグラフの凡例のボックスをグラフの線のスタイルで更新したい。

実際の消費量平均使用

​​

以下は私のコードがあるが、凡例ラベル画像が更新されていません。誰でも助けてくれますか？

var ctx = document.getElementById("myChart"); 
this.myChart = new Chart(ctx, { 
    type: 'line', 
    data: { 
     labels: ["Jan", "Blue", "Yellow", "Green", "Purple", "Orange"], 
     datasets: [{ 
      label: 'Actual Consumption', 
      data:[24, 49, 6, 7, 21, 6], 
      backgroundColor: [ 
       'rgba(225,225,225,0)' 
      ], 
      borderColor: [ 
       'rgba(53,91,183,1)' 
      ], 
      borderWidth: 2.2, 
      pointStyle: 'circle', 
     },{ 
      label: 'Average Use ', 
      data:[4, 12, 2, 17, 22, 2], 
      backgroundColor: [ 
       'rgba(225,225,225,0)' 
      ], 
      borderColor: [ 
       'rgba(230,104,38,1)' 

      ], 
      borderWidth: 2.2, 
      pointStyle: 'rect', 

     },{ 
      label: 'Total Use', 
      data:this.data, 
      backgroundColor: [ 
       'rgba(225,225,225,0)' 
      ], 
      borderColor: [ 
       'rgba(148,148,148,1)' 
      ] , 
      borderWidth: 2.2, 
      pointStyle: 'triangle', 

     }] 
    }, 
    options: { 
     scales: { 
      yAxes: [{ 
       ticks: { 
        beginAtZero:true 
       } 
      }] 
     }, 
     **legend: { 
      cursor : "pointer", 
      useLineStyle: true, 
      labels: { 
       fontColor: '#000000' 
      } 
     }** 
    } 
}); 

Answer 1

"usePointStyle"という凡例スタイルは、凡例スタイルとグラフポイントのスタイルを一致させる必要があります。

legend: { 
    labels: { 
    usePointStyle: true 
    } 
} 

これで問題が解決しない場合は、「legendCallback」を使用してカスタムHTML凡例を作成する必要があります。