Pel*_*lle 0 javascript chart.js
我已经尝试了很长一段时间,以弄清楚如何跳过此图表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
}
}]
}
}
});
Run Code Online (Sandbox Code Playgroud)
在图表选项中,您可以更改斧头的刻度线回调以基于值显示刻度线(标签),甚至可以更改其显示的内容:
options: {
scales: {
xAxes: [{
ticks: {
callback: function(tick, index, array) {
return (index % 3) ? "" : tick;
}
}
}]
}
}
Run Code Online (Sandbox Code Playgroud)
此选项基本上每三个显示一个刻度。
您可以在此jsfiddle中检查完整的脚本,这是其结果:
| 归档时间: |
|
| 查看次数: |
1684 次 |
| 最近记录: |