如何防止标签在移动屏幕Chart.js上重叠 [英] How I can prevent of labels overlapping on mobile screen Chart.js

问题描述

我正在使用此示例

我可以采取什么预防措施?我想使其完全响应.我尝试更改长度和其他长宽比等，但没有成功.

  var ctx = $('#myChart');ctx.height(500);var myChart = new Chart(ctx，{类型:"horizo​​ntalBar"，数据: {标签:[红色"，蓝色"，黄色"，绿色"，紫色"，橙色"]，数据集:[{标签:投票数"，数据:[12、19、3、5、2、3]，背景颜色: ['rgba(255，99，132，0.2)'，'rgba(54，162，235，0.2)'，'rgba(255，206，86，0.2)'，'rgba(75，192，192，0.2)'，'rgba(153，102，255，0.2)'，'rgba(255，159，64，0.2)']，边框颜色: ['rgba(255,99,132,1)'，'rgba(54，162，235，1)'，'rgba(255，206，86，1)'，'rgba(75，192，192，1)'，'rgba(153，102，255，1)'，'rgba(255，159，64，1)']，borderWidth:1}]}，maintenanceAspectRatio:否，选项: {比例尺:{y轴:[{滴答声:{beginAtZero:true}}]}}}); 

解决方案

可以通过动态(动态)更改y轴标签的字体大小来防止这种情况.但是，在ChartJS中没有这样做的内置方法，这意味着无论您如何调整图表的大小，字体大小都将始终相同.

但是，要解决此问题，您可以使用以下图表插件，它将使字体大小具有响应性...

 插件:[{beforeDraw:function(c){var chartHeight = c.chart.height;c.scales ['y-axis-0'].options.ticks.fontSize = chartHeight * 6/100;}}] 

添加此插件，然后添加您的图表选项.

这是 jsFiddle上的工作示例

I am using this example jsfiddle on But When I use a small screen labels start to overlap like this

What I can do to prevent it ? I want to make it fully responsive. I tried to change length and other aspect ratios etc but no sucess.

    var ctx = $('#myChart');

ctx.height(500);

var myChart = new Chart(ctx, {
    type: 'horizontalBar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    maintainAspectRatio: false,
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});

解决方案

This can be prevented by changing the y-axis label­'s font size on-the-fly (dynamically). Though, in ChartJS there is no built-in method to do so, meaning no matter how you resize the chart, the font size will always be the same.

However, to get around this, you can use the following chart plugin, which will make the font size responsive ...

plugins: [{
   beforeDraw: function(c) {
      var chartHeight = c.chart.height;
      c.scales['y-axis-0'].options.ticks.fontSize = chartHeight * 6 / 100;
   }
}]

add this plugin followed by your chart options.

Here is a working example on jsFiddle

这篇关于如何防止标签在移动屏幕Chart.js上重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！