Question

我现在已经尝试了很长时间才弄清楚如何跳过此图表x轴上的标签。因此，例如，显示每三个或第四个标签。我已经尝试将autoSkip和stepSize添加到tick配置中，但没有任何变化。有一种简单的方法可以做到这一点吗？

编辑：

visitorsLabels = ["januar", "desember", "november", "oktober", "september", "august", "juli", "juni", "mai", "april", "mars", "februar"]

var visitors_data = [2, 4, 2, 1, 2, 4, 2, 1, 2, 4, 2, 1];

var ctx1 = $("#chart-visitors"); 

var graph_visitors_preset = {
    labels: visitorsLabels,
    datasets: [
        {
            fill: true,
            lineTension: 0.1,
            backgroundColor: "#f9f9f9",
            borderColor: "#72bce3",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: "rgba(75,192,192,1)",
            pointBackgroundColor: "#fff",
            pointBorderWidth: 1,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(75,192,192,1)",
            pointHoverBorderColor: "rgba(220,220,220,1)",
            pointHoverBorderWidth: 2,
            pointRadius: 1,
            pointHitRadius: 10,
            data: visitors_data,
            spanGaps: true,
        }
    ]
};
var chart_visitors = new Chart(ctx1, {
    type: 'line',
    data: graph_visitors_preset,
    options: {
        responsive: true,
        legend: { display: false },
        scales: {
            xAxes: [{

                ticks: {autoSkip: true, stepSize: 3, max: 5, min: 2},
                gridLines: {
                    display: false
                }
            }],
            yAxes: [{

                gridLines: {
                    display: false
                }
            }]
        }
    }
});

Answer 1

在图表选项中，您可以更改斧头的刻度线'回调以根据值显示刻度线（标签），甚至更改显示的内容：

options: {
    scales: {
        xAxes: [{
            ticks: {
                callback: function(tick, index, array) {
                    return (index % 3) ? "" : tick;
                }
            }
        }]
    }
}

此选项基本上每三个显示一个刻度。

您可以在this jsfiddle中查看完整的脚本，结果如下：

如何跳过x轴上的标签？

1 个答案: