ChartJS yAxis标签在移动设备上重叠

时间:2019-01-31 14:25:00

标签: javascript css chart.js

我正在使用ChartJS显示一些每月数据,请参见屏幕截图:

enter image description here

yAxis标签是重叠的,我想避免这种情况,我也注意到xAxis标签并非全部丢失(3/18,5/18)。

我希望它能完全显示出来,创建高度,或者使标签变小,以便适合xAxis标签。

如果不是这样,则可以使图表可滚动。

我不知道如何实现这两种解决方案

    var labels = JSON.parse('[labels-come-here]');
    var data = JSON.parse('[data-comes-here]');

    var chart = new Chart(document.getElementById("my_chart"), {
        type: 'bar',
        responsive: true,
        data: {
        labels: labels,
        datasets: [
            {
            backgroundColor: "rgba(240,184,35, 0.6)",
            borderColor: ["rgba(240,184,35, 1)"],
            borderWidth: 1,
            data: data
            }
        ]
        },
        options: {
            legend: {
                display: false
            },
            title: {
                display: true
            },
            scales : {
                xAxes : [ {
                    barPercentage: 0.7,
                    gridLines : {
                        display : false
                    },
                    ticks: {
                        fontColor: "#1e2125",
                        fontSize: 13,
                        stepSize: 1,
                        beginAtZero: true
                    }
                } ],
                yAxes : [ {
                    stepSize: 80,
                    labelAutoFit: true,
                    ticks: {
                        fontColor: "#1e2125",
                        fontSize: 13,
                        labelAutoFit: true,
                        stepSize: 80,
                        suggestedMin: 0
                    }
                } ]
            }
        }
    });

0 个答案:

没有答案