Is there a way to customise the y-axis labels of line chart based on the given coordinates in chat.js?

huangapple go评论73阅读模式
英文:

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"];

根据上面的revenueData,y轴标签如下所示:
Is there a way to customise the y-axis labels of line chart based on the given coordinates in chat.js?

与上面的格式“350,000”和“200,000”不同,我想将它们显示为“350K”和“200K”,格式为缩写版本,类似下面的示意图:
Is there a way to customise the y-axis labels of line chart based on the given coordinates in chat.js?

我应该如何实现这一点?

理想情况下,代码不应该硬编码标签值以指定格式,而应该根据给定的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:
Is there a way to customise the y-axis labels of line chart based on the given coordinates in chat.js?

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:
Is there a way to customise the y-axis labels of line chart based on the given coordinates in chat.js?

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)

huangapple
  • 本文由 发表于 2023年7月23日 17:14:12
  • 转载请务必保留本文链接:https://go.coder-hub.com/76747460.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定