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

Answer 2

你可以添加一些CSS来阻止图表变得太小，迫使移动设备上的某些用户向右滚动： https://jsfiddle.net/panchroma/yybc26Lr/1/

我做的唯一改变是添加

.chart{
  min-width:300px;
}

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

2 个答案: