如何修復圖表傳奇在ChartJS中的溢出滾動寬度高度

我想爲我的項目創建餅圖，所以我使用ChartJS，但chartJS有一些問題，如果我的工作時間是10到20數據字段時間圖看起來不錯，但是當我在一個圖表中應用50到60個數據字段時，爲了使圖表看起來更小而不是圖例，並且如果有時數據字段比圖表太多隱藏，你只能看到傳說，圖表不見了。如何修復圖表傳奇在ChartJS中的溢出滾動寬度高度

我想爲該圖例設置高度或寬度，並且如果有更多數據，也適用於滾動條。

這裏是小提琴鏈接，供您參考

https://jsfiddle.net/KDM1010/5um78rbk/

<canvas id="myChart" width="500" height="300"></canvas> 


var ctx = document.getElementById("myChart").getContext('2d'); 
    var myChart = new Chart(ctx, { 
     type: 'pie', 
     data: { 
     labels: ["lable_1", "lable_2", "lable_3", "lable_4", "lable_5", "lable_6", "lable_7", "lable_8", "lable_9", "lable_10", "lable_11", "lable_12", "lable_13", "lable_14", "lable_15", "lable_16", "lable_17", "lable_18", "lable_19", "lable_20", "lable_21", "lable_22", "lable_23", "lable_24", "lable_25", "lable_26", "lable_27", "lable_28", "lable_29", "lable_30", "lable_31", "lable_32", "lable_33", "lable_34", "lable_35", "lable_36", "lable_37", "lable_38", "lable_39", "lable_40", "lable_41", "lable_42", "lable_43", "lable_44", "lable_45", "lable_46", "lable_47", "lable_48", "lable_49", "lable_50"], 
     datasets: [{ 
      backgroundColor: ["#2ecc71","#3498db","#95a5a6","#9b59b6","#f1c40f","#e74c3c","#34495e","#2ecc71","#3498db","#9a5a6","#9b59b6","#f1c40f","#e74c3c","#34495e","#2ecc71","#3498db","#95a5a6","#9b59b6","#f1c40","#e74c3c","#34495e","#2ecc71","#3498db","#95a5a6","#9b59b6","#f1c40f","#e74c3c","#34495e","#2ecc71","#3498db","#95a5a6","#9b59b6","#f1c40f","#e74c3c","#34495e","#2ecc71","#3498db","#955a6","#9b59b6","#f1c40f","#e74c3c","#34495e","#2ecc71","#3498db","#95a5a6","#9b59b6","#f1c40f,"#e74c3c","#34495e","#2ecc71","#3498db","#95a5a6","#9b59b6","#f1c40f","#e74c3c","#34495e" 
      ], 
      data: [74, 22, 77, 19, 72, 17, 55, 14, 64, 93, 99, 58, 6, 13, 31, 61, 19, 97, 25, 94, 50, 83, 3, 15, 54, 19, 60, 41, 37, 27, 51, 21, 36, 69, 80, 20, 64, 74, 79, 48, 66, 1, 94, 57, 5, 18, 83, 41, 64, 48] 
     }] 
     } 
    });

來源

2017-04-05 Kaushik Makwana

既然它的畫布如此造型是徒勞的，但你可以看看如何節省空間，一個這樣的事情將是改變顏色盒的傳說寬度爲https://jsfiddle.net/5um78rbk/1/或https：/ /jsfiddle.net/5um78rbk/2/或https://jsfiddle.net/5um78rbk/3/try某些方向或字體利用圖表的最大空間希望這有助於 –

@VinodLouis感謝您的回答，但在我們的應用程序，我們不' t知道我們有多少數據字段，例如某些圖表有10個數據字段，有些圖表有200多個數據字段，我們不確定我們有多少數據字段。 –

您可以嘗試一件事

嘗試傳說中分離出不同的股利。現在你有DIV，你可以使用自定義佈局和自己的CSS考慮下面的代碼的完全控制：

<div id="js-legend" class="chart-legend"></div> 
document.getElementById('js-legend').innerHTML = myChart.generateLegend();

更多信息參見本FIDDLE

如需辦理傳說互動，你需要擴展回調函數和操作是這樣的：

$("#js-legend > ul > li").on("click",function(e){ 
     var index = $(this).index(); 
     $(this).toggleClass("strike") 
     var ci = e.view.myChart; 
     var curr = ci.data.datasets[0]._meta[0].data[index]; 
     curr.hidden = !curr.hidden 
     ci.update(); 
})

對於傳說中的動作看此FIDDLE

說明：

我將窗口綁定到窗口，以便事件視圖可以獲取它，隨後由索引操縱數據和更新的運行時使用了很少的css技巧來說明罷工效果。

來源

2017-04-05 11:51:54

Aweeesommee mate !!!!!!!!!!!!! –

:) @KaushikMakwana像這樣的東西應該可以解決你的問題https://jsfiddle.net/5um78rbk/5/ –

是的，這就是我想要的...... 謝謝各有不同..... 我愛你的工作 –

如何修復圖表傳奇在ChartJS中的溢出滾動寬度高度

回答

相關問題