Chart.jsのカスタム凡例2.1.3

Question

Chart.jsの円グラフで凡例を移動して操作する方法はありますか？ 具体的には、円グラフの左または右に移動して、インラインではなくリストスタイルにしたいと考えています。私は

Chart.defaults.global.legend.display = false; 

でデフォルトの凡例を隠しそして

document.getElementById('js-legend').innerHTML = myChart.generateLegend(); 

で自分を構築しようとしたので、唯一の位置は上部または下部ているドキュメントに表示さしかし、これは色の凡例を生成しません。チャートに対応するボックス。

現在のjavascript：

var ctx = document.getElementById("myChart"); 
var myChart = new Chart(ctx, { 
    type: 'pie', 
    data: { 
     labels:generatedLabels, 
     datasets: [{ 
      data: dataPoints, 
      backgroundColor: generatedBackgroundColors 
     }] 
    } 
}); 

HTML：あなたはあなたの選択の要素にカスタム凡例を追加する場合

<div> 
    <canvas id="myChart"></canvas> 

</div> 
<div id="js-legend" class="pieLegend"></div> 

Answer 1

、あなたもその要素のCSSを追加する必要があります。追加すると色付きのボックスが表示されます。

あなたの場合、以下のCSSクラスをdiv要素に追加する必要があります。

.pieLegend li span{ 
    display: inline-block; 
    width: 12px; 
    height: 12px; 
    margin-right: 5px; 
}