我在 Chart.js 中遇到问题，我的 X 轴上的第一个标签太靠近 Y 轴，所以我想跳过第一个数据标签，以便第一个可见的标签为 30。此外，我的间隔通常以 30 为增量跳过，除了 x 轴上的最后一个间隔增加 59。我该如何解决这个问题？我看到奇怪的标签 (1,31,61...,301,360)，想看看 (30,60,90,...,330,360)，但无法从文档中弄清楚。
我也可以将 x 轴标签硬编码为 ["",30,60,90,...360]，只要其他点的基础数据保留在那里即可。
var x_vals = [];
var y_vals = [];
for (var i = 1; i < 361; i++) {
x_vals.push(i);
y_vals.push(1000 - i);
}
var obj = {
"chart_type": "line",
"x_values": x_vals,
"series_name": "whatever",
"y_values": y_vals,
"chart_title": "Something",
};
createSingleChartFromObj("chart1", obj);
// for a single-y-axis
function createSingleChartFromObj(canvasID, obj) {
let myChart = document.getElementById(canvasID).getContext('2d'); //getContext is for canvas
var massPopChart = new Chart(myChart, {
type: obj['chart_type'],
data: {
labels: obj['x_values'],
datasets: [{
label: obj['series_name'],
data: obj['y_values']
}]
},
options: {
title: {
display: true,
text: obj['chart_title'],
},
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: obj['series_name']
},
ticks: {
userCallback: function(value, index, values) {
if (parseInt(value) < 1000) {
return value.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
} else {
// https://stackoverflow.com/questions/38800226/chart-js-add-commas-to-tooltip-and-y-axis
return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
}
}
}],
xAxes: [{
beginAtZero: false,
display: true,
gridLines: false,
ticks: {
autoSkip: true,
maxTicksLimit: 12
},
color: 'black'
}]
},
showLines: true
}
})
}<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col" id="graph1">
<canvas width="100" height="100" id="chart1"></canvas>
</div>
</div>
</div>
</body>
</html>我的代码在 JS Fiddle 中
最佳答案
拥有较少的数据点可以解决很多问题:
var x_vals = [];
var y_vals = [];
for (var i=0;i<=360;i++) {
if ((i % 30) == true) {
x_vals.push(i-1);
y_vals.push(1000-i-1);
}
}
可能是 ChartJS 试图计算太多点......
关于javascript - 无法弄清楚如何使用 Chart.js 跳过 x 轴上的第一个数据点和 X 轴上的标签跳过倒数第二个数据点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54355004/