responsive-design - 如何防止标签在移动屏幕Chart.js上重叠

Question

我在上使用此示例jsfiddle，但是当我使用小屏幕时，标签开始像这样重叠



我可以做些什么来预防呢？我想使其完全响应。我试图更改长度和其他长宽比等，但没有成功。

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

Answer 1

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

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

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

添加此插件，然后添加图表选项。

这是一个working example on jsFiddle