隐藏 chartjs 中的所有刻度标签
Hide all scale labels in chartjs
我有一张看起来不错的图表。
它只显示了一行,一个数据集,没有 label/y 轴。
原来是这样配置的
options: {
plugins: {
legend: {
display: false
}
},
scales: {
y: {
display: false
},
x: {
display: false
}
}
}
但后来我决定添加另一个具有不同比例的数据集。
所以现在我的配置如下所示:
options: {
plugins: {
legend: {
display: false
}
},
scales: {
y: [
{
id: 'viewTime',
display: false
},
{
id: 'diff',
display: false
}
],
x: {
display: false
}
}
}
问题是,实际上显示 viewTime
和 diff
比例。
我是不是遗漏了什么或者如何隐藏所有比例?
天平不再是阵列天平。在 v3 中,每个比例尺都是它自己的对象,其中键是比例尺 ID,因此您将得到:
const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'pink'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'orange',
yAxisID: 'y2'
}
]
},
options: {
plugins: {
legend: {
display: false
}
},
scales: {
y: {
display: false
},
y2: {
display: false
},
x: {
display: false
}
}
}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script>
</body>
我有一张看起来不错的图表。
它只显示了一行,一个数据集,没有 label/y 轴。
原来是这样配置的
options: {
plugins: {
legend: {
display: false
}
},
scales: {
y: {
display: false
},
x: {
display: false
}
}
}
但后来我决定添加另一个具有不同比例的数据集。 所以现在我的配置如下所示:
options: {
plugins: {
legend: {
display: false
}
},
scales: {
y: [
{
id: 'viewTime',
display: false
},
{
id: 'diff',
display: false
}
],
x: {
display: false
}
}
}
问题是,实际上显示 viewTime
和 diff
比例。
我是不是遗漏了什么或者如何隐藏所有比例?
天平不再是阵列天平。在 v3 中,每个比例尺都是它自己的对象,其中键是比例尺 ID,因此您将得到:
const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'pink'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'orange',
yAxisID: 'y2'
}
]
},
options: {
plugins: {
legend: {
display: false
}
},
scales: {
y: {
display: false
},
y2: {
display: false
},
x: {
display: false
}
}
}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script>
</body>