[英]How to fix chart Legends width-height with overflow scroll in ChartJS
我想为我的项目创建饼图,所以我正在使用ChartJS,但是mapJS存在一些问题,如果我使用10到20个数据字段,时间图表看起来不错,但是当我申请更多时在一个图表中超过50到60个数据字段,因此该图表看起来更小而不是图例,并且如果有时数据字段太多而不是图表隐藏,则只能看到图例,图表就消失了。
我想将高度或宽度设置为该图例,如果有更多数据,还应用于滚动条。
这是小提琴链接供您参考
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]
}]
}
});
你可以尝试一件事
尝试将图例分成不同的div。 现在您可以完全控制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技巧来说明打击效果。
我没有找到任何解决方案,但如果要显示太多标签,我可以关闭图例(我在我的项目中做了) - 这里设置为最多15个标签:
options : {
responsive: true,
maintainAspectRatio: false,
layout: {
padding: {
left : 0,
right : 0,
top : 0,
bottom : 0
}
},
animation: {
duration : 5000
},
legend: {
display: this.chartValues.length <= 15,
}
}
您还可以创建更大的图表。 将其添加到您的scss文件中:
.chartjs-render-monitor{
height: 300px !important;
}
我希望它会帮助别人
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.