英文:
Is there a way to customise the y-axis labels of line chart based on the given coordinates in chat.js?
问题
我正在绘制一家公司的收入-时间图表。
给定一个表示公司在一段时间内收入价值的y坐标列表,如何设置y轴的标签,以比默认标签更易读?
收入数据(y坐标):
const revenueData = [227223.0, 294011.0, 263676.0, 199686.0, 289792.0, 224023.0, 253386.0, 269343.0, 324612.0, 220999.0];
相应的时间(x坐标):
const xAxisLabels = ["Q4 FY20","Q1 FY21","Q2 FY21","Q3 FY21","Q4 FY21","Q1 FY22","Q2 FY22","Q3 FY22","Q4 FY22","Q1 FY23"];
与上面的格式“350,000”和“200,000”不同,我想将它们显示为“350K”和“200K”,格式为缩写版本,类似下面的示意图:
我应该如何实现这一点?
理想情况下,代码不应该硬编码标签值以指定格式,而应该根据给定的y坐标进行配置。
以下是我的完整JS代码:
const revenueData = [227223.0, 294011.0, 263676.0, 199686.0, 289792.0, 224023.0, 253386.0, 269343.0, 324612.0, 220999.0];
const xAxisLabels = ["Q4 FY20","Q1 FY21","Q2 FY21","Q3 FY21","Q4 FY21","Q1 FY22","Q2 FY22","Q3 FY22","Q4 FY22","Q1 FY23"];
const chartData = {
labels: xAxisLabels,
datasets: [{
yAxisID: 'revenueAxis',
label: 'Revenue JPY',
data: revenueData,
fill: false,
borderColor: 'red',
backgroundColor: 'red'
}],
};
const chartConfig = {
type: "line",
data: chartData,
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
revenueAxis: {
type: 'linear',
position: 'left',
grid: { display: false },
ticks: { color: 'red' },
font: { family: "Garamond" },
title: {
text: 'Revenue in JPY',
display: true
}
},
x: {
grid: { display: false }
}
},
plugins: {
legend: { display: false },
title: {
display: true,
text: 'Custom Chart Title',
font: {
size: 20,
weight: 'normal',
},
padding: {
top: 10,
bottom: 30
}
},
},
}
};
const newChart = new Chart(document.getElementById('chartContainer'), chartConfig);
英文:
I'm plotting a revenue-time chart of a company.
Given a list of y-coordinates that represent value of revenue of a company over a period of time, how do I set the labels of the y-axis in a much readable manner than the default?
The revenue data (y-coordinates):
const revenueData = [227223.0, 294011.0, 263676.0, 199686.0, 289792.0, 224023.0, 253386.0, 269343.0, 324612.0, 220999.0];
The corresponding times (x-coordinates):
const xAxisLabels = ["Q4 FY20","Q1 FY21","Q2 FY21","Q3 FY21","Q4 FY21","Q1 FY22","Q2 FY22","Q3 FY22","Q4 FY22","Q1 FY23"];
Based on the above revenueData
the y-axis labels are as seen in the screenshot below:
Instead of displaying labels in the above format 350,000
and 200,000
I would like to display them as 350K
and 200K
, the format being the abbreviated version. Similar to the drawing below:
How do I achieve this?
Ideally, instead of hard-coding the label values in the mentioned format, the code must be able to configure it based on the y-coordinates given.
Here's my full JS code:
const revenueData = [227223.0, 294011.0, 263676.0, 199686.0, 289792.0, 224023.0, 253386.0, 269343.0, 324612.0, 220999.0];
const xAxisLabels = ["Q4 FY20","Q1 FY21","Q2 FY21","Q3 FY21","Q4 FY21","Q1 FY22","Q2 FY22","Q3 FY22","Q4 FY22","Q1 FY23"];
const chartData = {
labels: xAxisLabels,
datasets: [{
yAxisID: 'revenueAxis',
label: 'Revenue JPY',
data: revenueData,
fill: false,
borderColor: 'red',
backgroundColor: 'red'
}],
};
const chartConfig = {
type: "line",
data: chartData,
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
revenueAxis: {
type: 'linear',
position: 'left',
grid: { display: false },
ticks: { color: 'red', },
font: { family: "Garamond",},
title: {
text: 'Revenue in JPY',
display: true
}
},
x: {
grid: { display: false }
}
},
plugins: {
legend: { display: false },
title: {
display: true,
text: 'Custom Chart Title',
font: {
size: 20,
weight: 'normal',
},
padding: {
top: 10,
bottom: 30
}
},
},
}
};
const newChart = new Chart(document.getElementById('chartContainer'), chartConfig);
答案1
得分: 2
你可以像这样自定义你的y轴标签:
const chartConfig = {
type: "line",
data: chartData,
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
revenueAxis: {
type: 'linear',
position: 'left',
grid: { display: false },
ticks: {
color: 'red',
callback: (value) => {
return value / 1000 + 'k';
},
},
font: { family: "Garamond",},
title: {
text: 'Revenue in JPY',
display: true
}
},
x: {
grid: { display: false }
},
...剩余的代码
回调函数获取每个标签的值,将其除以1000,然后在末尾添加字母"k"。(如果值以某种方式作为字符串传递,请在value前面添加一个"+"符号)
英文:
You can customize your y-axis labels like this:
const chartConfig = {
type: "line",
data: chartData,
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
revenueAxis: {
type: 'linear',
position: 'left',
grid: { display: false },
ticks: {
color: 'red',
callback: (value) => {
return value / 1000 + 'k';
},
},
font: { family: "Garamond",},
title: {
text: 'Revenue in JPY',
display: true
}
},
x: {
grid: { display: false }
},
...rest of code
The callback function gets the value of each label and returns that divided by 1000 and adds the letter "k" at the end. (If the value somehow gets passed as a string, add a "+" in front of value)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论