Chart.js中的自定義圖例2.1.3

有沒有辦法在Chart.js的餅圖中移動和操作圖例？具體而言，我想將它移動到我的餅圖的左側或右側，並以列表樣式而不是內聯方式顯示。我看到的唯一位置是頂部或底部，所以我試圖隱藏默認的傳說與Chart.js中的自定義圖例2.1.3

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>

來源

2016-05-19 Steven B.

當您添加自定義的傳說到您選擇的元素，你還需要爲元素添加CSS。一旦你添加了彩色框就會顯示出來。

在您的情況下，您需要將以下css類添加到div元素。

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

來源

2016-05-20 06:31:31 Krishnakant

這對我不起作用;請在這裏看到我的更新：http://stackoverflow.com/questions/39645440/how-can-i-cause-a-legend-to-appear-to-the-right-of-the-pie-chart-js –

Chart.js中的自定義圖例2.1.3

回答

相關問題