chart.js - ChartJs - 以指定/固定间隔设置 x 轴刻度
问题描述
我有一个chart.js 折线图,其中x 轴标签是普通的旧数字,例如[2,4,15,45,90],它代表此图表上的天数。我不希望 x 轴刻度反映数据标签,我希望刻度的间隔为 20。我怎样才能做到这一点?
这在我的选项中没有任何作用:
xAxes: [ {
display: true,
position: 'bottom',
ticks: {
stepSize: 20,
min: 0,
max: 140
}
],
这里的例子:jsfiddle
...我发现的唯一(可怕)方法是将数字转换为日期,并在刻度回调中计算天数差异。如此处所见
解决方案
您可以使用散点图,将数据作为单个点、具有属性的对象x
和y
. 要将散点图转回折线图,只需showLine: true
在每个dataset
.
要将数据作为单个点进行产品化,您可以在图表外部定义并使用如下方式labels
转换两个值数组。Array.map()
valueArray.map((v, i) => ({ x: labels[i], y: v }))
最后要做的是定义xAxis.ticks
如下:
ticks: {
stepSize: 1,
autoSkip: false,
callback: value => value % 20 == 0 ? value : null,
min: labels[0],
max: labels[labels.length - 1],
maxRotation: 0
},
请在下面查看您修改后的代码:
const labels = [7, 14, 21, 35, 42, 49, 56, 63, 70, 77, 84, 91, 98, 105, 119, 126];
var myChart = new Chart('myChart', {
type: 'scatter',
data: {
datasets: [{
label: 'IC',
data: [9432.13209267, 1899.132847, 851.2122668, 3964.48968367, 9433, 8087.04121533, 1268.34642367, 825.29800317, 4271.00722867, 1157.57453933, 4928.214994, 783.88204033, 1846.623016, 4001.84214867, 709.70201067, 3917.61792167, 688.1571182].map((v, i) => ({ x: labels[i], y: v })),
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
showLine: true,
borderWidth: 1
},
{
label: 'Mtb',
data: [14241.41334667, 48348.08833, 5055.28134533, 7614.80689233, 14240, 24536.66203, 1083.99264, 144.72451603, 15968.94539333, 160.150183, 5127.77524033, 953.9963646, 0, 2989.36556, 21.32920023, 27.03159138, 60310.22952333].map((v, i) => ({ x: labels[i], y: v })),
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
showLine: true,
borderWidth: 1
}
]
},
options: {
scales: {
xAxes: [{
display: true,
position: 'bottom',
ticks: {
stepSize: 1,
autoSkip: false,
callback: value => value % 20 == 0 ? value : null,
min: labels[0],
max: labels[labels.length - 1],
maxRotation: 0
},
// afterBuildTicks: (axis, ticks) => [0, 20, 40, 60, 80, 100, 120],
scaleLabel: {
display: true,
labelString: 'Days from initial test',
fontSize: 16
}
}],
yAxes: [{
display: true,
position: 'left',
ticks: {
beginAtZero: true,
stepSize: 10000,
min: 0,
max: 70000
},
scaleLabel: {
display: true,
fontSize: 16
}
},
{
display: true,
position: 'right',
ticks: {
beginAtZero: true,
stepSize: 10000,
min: 0,
max: 70000
},
scaleLabel: {
display: true,
fontSize: 16
}
},
]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="100"></canvas>
推荐阅读
- amazon-web-services - 有没有办法使用 amazonMQ 在 AWS 中查看 kahaDB 日志?
- python - 将树视图中的内容导出到excel文件的最短方法是什么
- ruby - 有没有办法在 ruby 中指定不可扩展的类?
- scala - 在 Scala 中编写级联 if 语句的更好方法?
- jquery - 以与文件相同的顺序加载图像
- pandas - 将 df2 中随机选择的值与 df1 连接
- c# - 类型“System.Linq.Enumerable”上不存在方法“SelectToken”
- python - 更快地迭代 pandas 数据框并应用条件函数的方法
- python - Python Cryptography 生成带有属性部分挑战的 CSR
- c# - 在 c# 中使用 SqlBulkCopy 插入新记录并更新现有记录