本文介绍了如何跳过X轴上的标签?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述



我已经尝试了很长时间了,以找出如何跳过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轴上的标签?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-31 23:14