英文:
How can I fix the issue where the column values on my Chart JS chart are displayed in the wrong place?
问题
我在NodeJS上编写了一个Telegram机器人，可以根据请求显示销售柱状图。
第一个图显示了正确的列值排列。第二个图是不正确的。只有在处理第一个查询时才会显示正确的图表，并且所有重复的查询都会绘制错误的图表（列值显示不正确）。
const { ChartJSNodeCanvas } = require('chartjs-node-canvas');
const width = 600; // 图表宽度
const height = 400; // 图表高度
const chartCallback = (ChartJS) => {
ChartJS.defaults.font.size = 14; // 设置默认字体大小
};
const canvas = new ChartJSNodeCanvas({ width, height, chartCallback });
const chartData = {
labels: ['План', 'Факт', 'Прогноз'],
datasets: [
{
label: 'Сумма',
data: [salesTarget, monthSum, monthForcastSum],
backgroundColor: 'rgba(54, 162, 235, 0.5)', // 柱状图背景颜色
borderColor: 'rgba(54, 162, 235, 1)', // 柱状图边框颜色
borderWidth: 1, // 柱状图边框宽度
},
],
};
const chartOptions = {
responsive: false, // 禁用自动响应
scales: {
y: {
beginAtZero: true, // 从零开始Y轴
ticks: {
callback: (value) => value.toLocaleString('ru-RU'), // 格式化Y轴值
},
},
},
plugins: {
datalabels: {
anchor: 'end',
align: 'top',
font: {
size: 20,
weight: 'bold',
},
formatter: (value) => value.toLocaleString('ru-RU'), // 格式化值标签
color: 'rgba(54, 162, 235, 1)', // 文本颜色
textAlign: 'center',
},
title: {
display: true,
text: `Продажи за ${currentMonth} ${moment().format('YYYY')} (${moment().format('DD.MM - HH:mm')})`,
color: 'rgba(54, 162, 235, 1)',
font: {
size: 20,
weight: 'bold',
lineHeight: 1.2,
},
}
},
};
const configuration = {
type: 'bar', // 柱状图类型
data: chartData,
options: chartOptions,
plugins: [ChartDataLabels], // 注册插件
};
const image = await canvas.renderToBuffer(configuration);
告诉我如何解决这个问题。
英文:
I wrote a telegram bot on NodeJS that shows a bar graph of sales on request.
The first graph shows the correct arrangement of column values. The second one is incorrect. The correct graph appears only when the first query is processed, and all repeated queries draw the wrong graph (with incorrect display of column values).
const { ChartJSNodeCanvas } = require('chartjs-node-canvas');
const width = 600; // Chart width
const height = 400; // Chart height
const chartCallback = (ChartJS) => {
ChartJS.defaults.font.size = 14; // Set default font size
};
const canvas = new ChartJSNodeCanvas({ width, height, chartCallback });
const chartData = {
labels: ['План', 'Факт', 'Прогноз'],
datasets: [
{
label: 'Сумма',
data: [salesTarget, monthSum, monthForcastSum],
backgroundColor: 'rgba(54, 162, 235, 0.5)', // Bar background color
borderColor: 'rgba(54, 162, 235, 1)', // Bar border color
borderWidth: 1, // Bar border width
},
],
};
const chartOptions = {
responsive: false, // Disable automatic responsiveness
scales: {
y: {
beginAtZero: true, // Start Y axis from zero
ticks: {
callback: (value) => value.toLocaleString('ru-RU'), // Format Y axis values
},
},
},
plugins: {
datalabels: {
anchor: 'end',
align: 'top',
font: {
size: 20,
weight: 'bold',
},
formatter: (value) => value.toLocaleString('ru-RU'), // Format value labels
color: 'rgba(54, 162, 235, 1)', //'black', // Label text color
textAlign: 'center',
},
title: {
display: true,
text: `Продажи за ${currentMonth} ${moment().format('YYYY')} (${moment().format('DD.MM - HH:mm')})`,
color: 'rgba(54, 162, 235, 1)',
font: {
size: 20,
weight: 'bold',
lineHeight: 1.2,
},
}
},
};
const configuration = {
type: 'bar', // Bar chart type
data: chartData,
options: chartOptions,
plugins: [ChartDataLabels], // Register the plugin
};
const image = await canvas.renderToBuffer(configuration);
Tell me how to deal with this problem.
答案1
得分: 0
const chartOptions = {
//...
plugins: {
datalabels: {
anchor: 'start', // Заменить 'end' на 'start'
//...
},
//...
},
};
英文:
const chartOptions = {
//...
plugins: {
datalabels: {
anchor: 'start', // Заменить 'end' на 'start'
//...
},
//...
},
};
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论