英文:
Chart.js 3.7.1 remove the scale on the left with values
问题
如何关闭在截图中我标记的从0到45000的附加刻度?我已经尝试了一切可能的方法。似乎可以将Chart.js更新到最新版本,但我对在版本3.7.1中更正行为的可能性感兴趣。还存在一个问题,在最顶部的那个点上,100%的值标签被切掉了,我也找不到如何修复它。
选项:
export const chartOptions: ICustomChartOptions = {
responsive: true,
layout: {},
elements: {
bar: {
borderRadius: 4,
},
line: {
borderWidth: 3,
},
point: {
backgroundColor: '#FFFFFF',
borderWidth: 2,
radius: 4,
},
},
clip: false,
scales: {
x: {
grid: {
display: false,
},
ticks: {
font: {
size: 10,
},
},
min: 0,
max: 100000,
},
y: {
position: 'left',
grid: {
drawBorder: false,
},
ticks: {
callback: function (value) {
return `${value}%`;
},
stepSize: 25,
font: {
size: 10,
},
},
min: 0,
max: 100,
beginAtZero: true,
},
},
plugins: {},
};
更新:这是图表的数据
export const chartData: ChartData<'line'> = {
labels: chartLabels,
datasets: [
{
type: 'line',
// yAxisID: 'line',
data: [100, 20, 49, 10, 97],
order: 1,
datalabels: {
anchor: 'start',
align: 'end',
color: color['Purple/Purple 80'],
formatter(value) {
return `${value}%`;
},
},
},
{
type: 'bar' as 'line',
yAxisID: 'bar',
data: [22000, 17500, 12000, 10000, 44000],
order: 2,
datalabels: {
align: 'end',
},
},
],
};
更新2
用于显示值,我使用了ChartDataLabels插件。
英文:
How to turn off the scale with additional marks from 0 to 45000 which I highlighted in the screenshot? I have tried everything possible.
it seems that it is possible to update chartjs to the latest version, but I'm interested in the possibility of correcting the behavior in version 3.7.1
there is also a problem that at the point at the very top where 100% the label with a value of 100 of this point is cut off, until I also found how to fix it.
Options:
export const chartOptions: ICustomChartOptions = {
responsive: true,
layout: {},
elements: {
bar: {
borderRadius: 4,
},
line: {
borderWidth: 3,
},
point: {
backgroundColor: '#FFFFFF',
borderWidth: 2,
radius: 4,
},
},
clip: false,
scales: {
x: {
grid: {
display: false,
},
ticks: {
font: {
size: 10,
},
},
min: 0,
max: 100000,
},
y: {
position: 'left',
grid: {
drawBorder: false,
},
ticks: {
callback: function (value) {
return `${value}%`;
},
stepSize: 25,
font: {
size: 10,
},
},
min: 0,
max: 100,
beginAtZero: true,
},
},
plugins: {},
};
UPD: This is data for chart
export const chartData: ChartData<'line'> = {
labels: chartLabels,
datasets: [
{
type: 'line',
// yAxisID: 'line',
data: [100, 20, 49, 10, 97],
order: 1,
datalabels: {
anchor: 'start',
align: 'end',
color: color['Purple/Purple 80'],
formatter(value) {
return `${value}%`;
},
},
},
{
type: 'bar' as 'line',
yAxisID: 'bar',
data: [22000, 17500, 12000, 10000, 44000],
order: 2,
datalabels: {
align: 'end',
},
},
],
};
UPD 2
for display values, i use ChartDataLabels
答案1
得分: 1
以下是您要翻译的内容:
"Without the data, one can't be sure how the second axis comes to be, but I'll suppose that it is the axis for the type: "bar"
part of a mixed chart. Therefore, the data might be something on the lines of (I'll spare the typings, as this is too imprecise for that):
const data = {
labels: [....],
datasets: [
{
type: "line",
label: "....",
data: [.....]
},
{
type: "bar",
label: "....",
data: [.....]
},
]
}
In this case, you'll have to set the y axes ids for the two parts and, in options set display: false
for the axis you don't want to show:
const data = {
labels: [....],
datasets: [
{
type: "line",
label: "....",
data: [.....],
yAxisID: "y"
},
{
type: "bar",
label: "....",
data: [.....],
yAxisID: "y2"
}
]
};
const chartOptions = {
//....... other options
scales:{
x: {
// .... options for the x axis
},
y: {
// .... options for the y axis
},
y2:{
display: false,
// ... other y2 options, if any
}
}
}
Here's a snippet with a minimal version of the code doing that:
const data = {
labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
datasets: [
{
label: 'lines',
data: [100, 20, 40, 50, 90, 44, 29],
type: 'line',
order: 1,
yAxisID: 'y'
},
{
label: 'bars',
data: [10009, 2000, 4000, 5000, 9000, 4400, 2900],
type: 'bar',
order: 0,
yAxisID: 'y2'
}
]
};
const options = {
scales:{
y: {
beginAtZero: false,
//grace: "2%"
},
y2: {
display: false,
}
},
layout: {
padding: {top: 10} // to fit the label
}
}
new Chart(document.getElementById('chart1'), {data, options});
<div style="height: 100%; width:100%">
<canvas id="chart1" style="height: 90vh; width:95vw"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js" integrity="sha512-QSkVNOCYLtj73J4hbmVoOV6KVZuMluZlioC+trLpewV8qMjsWqlIQvkn1KGX2StWvPMdWGBqim1xlC8krl1EKQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
As for fitting the label, again, we don't know how you added them. You may try:
options.layout.padding.top
docs link (see the example above),options.scales.y.grace
docs link (commented in the example above)- or simply increasing the maximum (
max
) of they
scale according to data."
英文:
Without the data, one can't be sure how the second axis comes to be, but I'll suppose that it is the axis for the type: "bar"
part of a mixed chart. Therefore, the data might be something on the lines of (I'll spare the typings, as this is too imprecise for that):
const data = {
labels: [....],
datasets: [
{
type: "line",
label: "....",
data: [.....]
},
{
type: "bar",
label: "....",
data: [.....]
},
]
}
In this case, you'll have to set the y axes ids for the two parts and, in options set display: false
for the axis you don't want to show:
const data = {
labels: [....],
datasets: [
{
type: "line",
label: "....",
data: [.....],
yAxisID: "y"
},
{
type: "bar",
label: "....",
data: [.....],
yAxisID: "y2"
}
]
};
const chartOptions = {
//....... other options
scales:{
x: {
// .... options for the x axis
},
y: {
// .... options for the y axis
},
y2:{
display: false,
// ... other y2 options, if any
}
}
}
Here's a snippet with a minimal version of the code doing that:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const data = {
labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
datasets: [
{
label: 'lines',
data: [100, 20, 40, 50, 90, 44, 29],
type: 'line',
order: 1,
yAxisID: 'y'
},
{
label: 'bars',
data: [10009, 2000, 4000, 5000, 9000, 4400, 2900],
type: 'bar',
order: 0,
yAxisID: 'y2'
}
]
};
const options = {
scales:{
y: {
beginAtZero: false,
//grace: "2%"
},
y2: {
display: false,
}
},
layout: {
padding: {top: 10} // to fit the label
}
}
new Chart(document.getElementById('chart1'), {data, options});
<!-- language: lang-html -->
<div style="height: 100%; width:100%">
<canvas id="chart1" style="height: 90vh; width:95vw"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js" integrity="sha512-QSkVNOCYLtj73J4hbmVoOV6KVZuMluZlioC+trLpewV8qMjsWqlIQvkn1KGX2StWvPMdWGBqim1xlC8krl1EKQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- end snippet -->
As for fitting the label, again, we don't know how you added them. You may try:
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论