如何跳过X轴上的标签？ [英] How to skip labels on x-axes?

问题描述

我已经尝试了很长时间了，以找出如何跳过X轴上的标签此图表。因此，例如，每三个或第四个标签显示一次。我尝试将autoSkip和stepSize添加到tick配置中，但是没有任何变化。有简单的方法吗？

编辑：

  VisitorsLabels = [ januar， desember，十一月， oktober， september， august， juli， juni， mai， april， mars， februar ] 
 
 var Visitorsdata = [2，4，2，1，2，4，4，1，2，4，2，1]; 
 
 var ctx1 = $（＃chart-visitors）; 
 
 var graph_visitors_preset = {
标签：VisitorsLabel，
数据集：[
 {
 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，
数据：visiters_data，
 span差距：true，
} 
] 
}; 
 var chart_visitors =新图表（ctx1，{
类型：'line'，
数据：graph_visitors_preset，
选项：{
响应：true，
图例：{display：false}，
标度：{
 xAxes：[{
 
 ticks：{autoSkip：true，stepSize：3，max：5，min：2} ，
 gridLines：{
 display：false 
} 
}]，
 y轴：[{
 
 gridLines：{
显示：false 
} 
}] 
} 
} 
}）； 
  

解决方案

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

 选项：{
标度：{
 xAxes：[{
 ticks：{
回调：function（tick，index，array）{
 return（index ％3）？ ：勾号； 
} 
} 
}] 
} 
} 
  

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

---

您可以在

I've been trying for a long time now to figure out how to skip labels on the x-axes of this chart. So, for instance, display every third or fourth label. I've tried adding autoSkip and stepSize to the tick-configuration, but nothing changes. Is there a simple way to do this?

Edit:

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

解决方案

In the chart options, you can change an axe's ticks' callback to display the tick (the label) based on a value, or even change what it displays :

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

This option basically display one tick every three.

---

You can check a full script in this jsfiddle, and here is its result :

这篇关于如何跳过X轴上的标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！