如何在ChartJS中使用溢出滚动修复图表图例宽度 - 高度 [英] How to fix chart Legends width-height with overflow scroll in ChartJS

查看:133
本文介绍了如何在ChartJS中使用溢出滚动修复图表图例宽度 - 高度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想为我的项目创建饼图,所以我正在使用ChartJS,但是mapJS存在一些问题,如果我使用10到20个数据字段,时间图表看起来不错,但是当我我在一个图表中应用了超过50到60个数据字段,因此该图表看起来更小而不是图例,并且如果有时数据字段太多而不是图表隐藏,则只能看到图例,图表就消失了。



我想将高度或宽度设置为该图例,如果有更多数据,也适用于滚动条。



以下是供您参考的小提琴链接



 < canvas id =myChartwidth =500height =300>< / canvas> 


var ctx = document.getElementById(myChart)。getContext('2d');
var myChart =新图表(ctx,{
类型:'pie',
数据:{
标签:[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],
数据集:[{
backgroundColor:[#2ecc71,#3498db,#95a5a6,#9b59b6,#f1c40f,#e74c3c,#34495e,#2ecc71,#3498db,# 9a5a6\" , #9b59b6, #f1c40f, #e74c3c, #34495e, #2ecc71, #3498分贝, #95a5a6, #9b59b6, #f1c40,# e74c3c #34495e, #2ecc71, #3498分贝, #95a5a6, # 9b59b6\" , #f1c40f, #e74c3c, #34495e, #2ecc71, #3498分贝, #95a5a6, #9b59b6, #f1c40f, #e74c3c,# 34495e #2ecc71, #3498分贝, #955a6, #9b59b6, #f1c40f, #e74c3c, #34495e, #2ecc71, #3498分贝, # 95a5a6\" , #9b59b6, #f1c40f, #e74c3c #34495e, #2ecc71, #3498分贝, #95a5a6, #9b59b6, #f1c40f, #e74c3c ,#34495e
],
数据:[74,22,77,19,72,17,55,14,64,93,99,58,6,13,31,61 ,19,97,25,94,50,53,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-legendclass =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();
})

对于Legend in action,请参阅 FIDDLE



解释



我将图表绑定到窗口这样事件视图就可以得到它,后来由索引操纵数据和更新的运行时使用了几个css技巧来说明打击效果。


I want to create pie chart for my project, so I am using ChartJS for it, but there are some issues with chartJS, If I am work with 10 to 20 data-field that time chart is looks good, But when I am apply more than 50 to 60 data-field in one chart, So that chart is looks smaller instead of legends, and If sometimes data-field is too much than the chart is hide, you can see only legends, chart is gone.

I want to set height or width to that legends and also apply to scrollbar if there is more data.

Here is the fiddle link for your reference

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]
        }]
      }
    });

解决方案

You can try one thing

Try to separate the legend into an different div. now you have full control of the div you can use custom placement and css of your own consider the following code :

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

For reference see this FIDDLE

For handling legend interactive you need to extend the callback function and manipulate like this :

$("#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();
}) 

For Legend in action see this FIDDLE

Explanation :

I binded chart to window so that event view can get it, and later by the index manipulated the data and updated runtime used few css tricks to illustrate the strike effect.

这篇关于如何在ChartJS中使用溢出滚动修复图表图例宽度 - 高度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆