如何防止标签在移动屏幕 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, {类型:'水平条'，数据: {标签:[红色"，蓝色"，黄色"，绿色"，紫色"，橙色"]，数据集:[{标签:'投票数'，数据:[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)'],边框宽度:1}]},保持纵横比:假，选项: {秤:{y轴:[{滴答声:{开始零:真}}]}}});

解决方案

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

但是，为了解决这个问题，您可以使用以下图表插件，这将使字体大小响应...

插件:[{画前:函数(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屋！