【发布时间】：2022-10-05 23:20:30
【问题描述】：
我需要帮助，因为我的图表有问题
我正在使用 chartjs-node-canva，它是在 nodejs 中使用的 chartjs 版本，作为从后端使用库的简单方法。我正在做的是将图形转换为图像，然后将其放在我的 HTML 模板中
到目前为止一切顺利，我的问题是，当我第一次加载模板时，我为图表配置的样式会按照我的预期显示，
但是当我刷新页面时，问题就开始了，因为一切都不同步。
我真的不知道发生了什么以及为什么会这样，有人知道我该如何解决这个问题吗？
在此先感谢，任何形式的帮助将不胜感激，祝您有美好的一天。
** 代码 **
const canvasRenderService = new ChartJSNodeCanvas({
width: 860,
height: 539,
chartCallback: (ChartJS) => {
ChartJS.register(require(\'chartjs-plugin-datalabels\'))
}
});
const subLabels = {
id: \'subLabels\',
afterDatasetsDraw(chart, args, pluginOptions) {
const { ctx, chartArea: { left, right, top, bottom, width, height } } = chart;
ctx.save();
subLabelText(\'DEV\', width / 4 * 1.6);
subLabelText(\'SAC\', width / 4 * 3.1);
subLabelText(\'DESIGN\', width / 4 * 3.9);
function subLabelText(text, x) {
ctx.font = \'bold 12px sans-serif\';
ctx.fillStyle = \'rgba(102, 102, 102, 1)\';
ctx.textAlign = \'center\';
ctx.fillText(text, x + left, bottom + 144);
let xAxis = chart.scales[\'x-axis-0\'];
let xCenter = (xAxis.left + xAxis.right) / 1.45;
let yBottom = chart.scales[\'y-axis-0\'].bottom;
ctx.strokeStyle = \'lightgray\';
[xAxis.left, xCenter, xAxis.right].forEach(AxisX => {
ctx.beginPath();
ctx.moveTo(AxisX, yBottom);
ctx.lineTo(AxisX, yBottom + 110);
ctx.stroke();
});
ctx.beginPath();
ctx.strokeStyle = \'lightgray\';
ctx.moveTo(width / 4 * 3.95, yBottom);
ctx.lineTo(width / 4 * 3.95, yBottom + 120);
ctx.stroke();
ctx.restore();
}
}
}
const mkChart = await canvasRenderService.renderToBuffer({
type: \'bar\',
data: {
labels: labels,
datasets: [{
type: \'line\',
label: \'% ACTIVITY\',
backgroundColor: \'#FF7605\',
borderColor: \'#FF7605\',
data: lineBar,
datalabels: {
anchor: \'start\',
align: \'center\',
clamp: true,
backgroundColor: \'#FF7605\',
color: \'white\',
font: {
weight: \'bold\'
}
}
},
{
type: \'bar\',
label: \'WEEKLY SUMMARY OF HOURS\',
backgroundColor: \'#222A35\',
borderColor: \'#222A35\',
data: barHorizontal,
datalabels: {
rotation: 270,
padding: 10,
anchor: \'start\',
align: \'end\'
},
barPercentage: 0.5
},
{
type: \'bar\',
label: \'HOURS\',
backgroundColor: \'#008582\',
borderColor: \'#008582\',
data: colbWeekly,
datalabels: {
anchor: \'end\',
align: \'top\',
clamp: true,
backgroundColor: \'#008582\',
color: \'white\',
font: {
weight: \'bold\'
}
},
barPercentage: 0.5
}]
},
options: {
plugins: {
datalabels: {
color: \'white\',
font: {
weight: \'bold\'
},
},
title: {
display: true,
text: \'AVERAGE WEEKLY HOURS\'
},
legend: {
position: \'top\',
labels: {
padding: 30,
usePointStyle: true
}
},
},
elements: {
line: {
fill: false
}
},
scales: {
\'x-axis-0\': {
stacked: true,
min: 0,
max: 80,
ticks: {
stepSize: 20,
minRotation: 90,
},
grid: {
display: false
},
// barPercentage: 0.2
},
\'y-axis-0\': {
grid: {
drawOnChartArea: true
}
}
}
},
plugins: [subLabels]
});
CSS
body {
font-family: \'Poppins\', sans-serif !important;
min-height: 100%;
font-size: 0.80rem !important;
}
html {
height: 100%;
}
@page {
margin: 10mm;
}
@media print {
body {
margin: 0;
}
html,
body {
height: 100%;
margin: 0 !important;
padding: 0 !important;
}
}
.Logo {
object-fit: contain;
}演示
const apidata = [{
\"id\": 6430591403,
\"task_id\": 110578536,
\"user_id\": 854500,
\"keyboard\": 872,
\"mouse\": 2123,
\"input_tracked\": 20149,
\"manual\": 9000,
\"idle\": 0,
\"resumed\": 0,
\"billable\": 20149,
\"created_at\": \"2022-09-02T17:40:03.167232Z\",
\"updated_at\": \"2022-09-03T11:00:24.381152Z\",
\"username\": \"user1\",
\"status\": \"active\",
\"weekly_hours\": 24,
\"three_weekly_hours\": 12,
\"summaryWeekly\": 29149,
\"summaryoverallWeekly\": 2827,
\"dayliHoursDaily\": 4,
\"summaryHoursTrackedWeekly\": 8,
\"percentageHours\": 2.024236111111111,
\"activityWeekly\": 0,
\"percentageActivityWeekly\": 2,
\"rolTittle\": \"DEV\",
\"rolPriority\": 0,
\"summaryStarts\": 0,
\"percentActivityW\": 8,
\"avergeHourWeekly\": 2.025
},
{
\"id\": 6418099795,
\"task_id\": 110964243,
\"user_id\": 1169488,
\"keyboard\": 12454,
\"mouse\": 21282,
\"input_tracked\": 56867,
\"manual\": 9000,
\"idle\": 0,
\"resumed\": 634,
\"billable\": 56867,
\"created_at\": \"2022-09-01T14:12:47.422537Z\",
\"updated_at\": \"2022-09-02T11:00:52.334795Z\",
\"username\": \"user2\",
\"status\": \"active\",
\"weekly_hours\": 44,
\"three_weekly_hours\": 20,
\"summaryWeekly\": 65867,
\"summaryoverallWeekly\": 30906,
\"dayliHoursDaily\": 8,
\"summaryHoursTrackedWeekly\": 18,
\"percentageHours\": 4.574097222222222,
\"activityWeekly\": 0,
\"percentageActivityWeekly\": 12,
\"rolTittle\": \"DEV\",
\"rolPriority\": 0,
\"summaryStarts\": 0,
\"percentActivityW\": 35,
\"avergeHourWeekly\": 4.575
},
{
\"id\": 6436682459,
\"task_id\": 111277830,
\"user_id\": 854472,
\"keyboard\": 3650,
\"mouse\": 53335,
\"input_tracked\": 76184,
\"manual\": 0,
\"idle\": 0,
\"resumed\": 0,
\"billable\": 76184,
\"created_at\": \"2022-09-03T14:04:18.371347Z\",
\"updated_at\": \"2022-09-04T11:00:12.456776Z\",
\"username\": \"user3\",
\"status\": \"active\",
\"weekly_hours\": 44,
\"three_weekly_hours\": 20,
\"summaryWeekly\": 76184,
\"summaryoverallWeekly\": 55852,
\"dayliHoursDaily\": 8,
\"summaryHoursTrackedWeekly\": 21,
\"percentageHours\": 5.290555555555556,
\"activityWeekly\": 0,
\"percentageActivityWeekly\": 18,
\"rolTittle\": \"DEV\",
\"rolPriority\": 0,
\"summaryStarts\": 2,
\"percentActivityW\": 54,
\"avergeHourWeekly\": 5.29
},
{
\"id\": 6418143504,
\"task_id\": 111039935,
\"user_id\": 957706,
\"keyboard\": 8128,
\"mouse\": 26665,
\"input_tracked\": 56130,
\"manual\": 0,
\"idle\": 0,
\"resumed\": 0,
\"billable\": 56130,
\"created_at\": \"2022-09-01T14:20:38.428547Z\",
\"updated_at\": \"2022-09-02T11:00:53.895079Z\",
\"username\": \"user4\",
\"status\": \"active\",
\"weekly_hours\": 44,
\"three_weekly_hours\": 20,
\"summaryWeekly\": 56130,
\"summaryoverallWeekly\": 31989,
\"dayliHoursDaily\": 8,
\"summaryHoursTrackedWeekly\": 16,
\"percentageHours\": 3.8979166666666667,
\"activityWeekly\": 0,
\"percentageActivityWeekly\": 14,
\"rolTittle\": \"DEV\",
\"rolPriority\": 0,
\"summaryStarts\": 0,
\"percentActivityW\": 42,
\"avergeHourWeekly\": 3.8975000000000004
},
{
\"id\": 6436827335,
\"task_id\": 110101015,
\"user_id\": 854517,
\"keyboard\": 5695,
\"mouse\": 28077,
\"input_tracked\": 62610,
\"manual\": 0,
\"idle\": 0,
\"resumed\": 0,
\"billable\": 62610,
\"created_at\": \"2022-09-03T16:51:44.533355Z\",
\"updated_at\": \"2022-09-04T11:00:10.219855Z\",
\"username\": \"user5\",
\"status\": \"active\",
\"weekly_hours\": 44,
\"three_weekly_hours\": 20,
\"summaryWeekly\": 62610,
\"summaryoverallWeekly\": 30715,
\"dayliHoursDaily\": 8,
\"summaryHoursTrackedWeekly\": 17,
\"percentageHours\": 4.347916666666666,
\"activityWeekly\": 0,
\"percentageActivityWeekly\": 12,
\"rolTittle\": \"DEV\",
\"rolPriority\": 0,
\"summaryStarts\": 0,
\"percentActivityW\": 37,
\"avergeHourWeekly\": 4.3475
},
{
\"id\": 6415607157,
\"task_id\": 111238271,
\"user_id\": 854471,
\"keyboard\": 7295,
\"mouse\": 14616,
\"input_tracked\": 29633,
\"manual\": 0,
\"idle\": 1571,
\"resumed\": 0,
\"billable\": 29633,
\"created_at\": \"2022-09-01T06:17:06.580395Z\",
\"updated_at\": \"2022-09-02T11:01:01.677261Z\",
\"username\": \"user6\",
\"status\": \"active\",
\"weekly_hours\": 44,
\"three_weekly_hours\": 20,
\"summaryWeekly\": 29633,
\"summaryoverallWeekly\": 19055,
\"dayliHoursDaily\": 8,
\"summaryHoursTrackedWeekly\": 8,
\"percentageHours\": 2.057847222222222,
\"activityWeekly\": 0,
\"percentageActivityWeekly\": 16,
\"rolTittle\": \"DEV\",
\"rolPriority\": 0,
\"summaryStarts\": 0,
\"percentActivityW\": 31,
\"avergeHourWeekly\": 2.0575
},
{
\"id\": 6438865339,
\"task_id\": 110014205,
\"user_id\": 1171637,
\"keyboard\": 11728,
\"mouse\": 24895,
\"input_tracked\": 70739,
\"manual\": 1620,
\"idle\": 0,
\"resumed\": 0,
\"billable\": 70739,
\"created_at\": \"2022-09-04T16:03:44.328404Z\",
\"updated_at\": \"2022-09-05T11:00:31.972437Z\",
\"username\": \"user7\",
\"status\": \"active\",
\"weekly_hours\": 44,
\"three_weekly_hours\": 20,
\"summaryWeekly\": 72359,
\"summaryoverallWeekly\": 30822,
\"dayliHoursDaily\": 8,
\"summaryHoursTrackedWeekly\": 20,
\"percentageHours\": 5.024930555555556,
\"activityWeekly\": 0,
\"percentageActivityWeekly\": 11,
\"rolTittle\": \"DEV\",
\"rolPriority\": 0,
\"summaryStarts\": 2,
\"percentActivityW\": 31,
\"avergeHourWeekly\": 5.0225
},
{
\"id\": 6429724387,
\"task_id\": 111040126,
\"user_id\": 854493,
\"keyboard\": 13205,
\"mouse\": 30058,
\"input_tracked\": 56630,
\"manual\": 0,
\"idle\": 0,
\"resumed\": 0,
\"billable\": 56630,
\"created_at\": \"2022-09-02T14:46:58.641008Z\",
\"updated_at\": \"2022-09-03T11:00:13.064762Z\",
\"username\": \"user8\",
\"status\": \"active\",
\"weekly_hours\": 44,
\"three_weekly_hours\": 20,
\"summaryWeekly\": 56630,
\"summaryoverallWeekly\": 40044,
\"dayliHoursDaily\": 8,
\"summaryHoursTrackedWeekly\": 16,
\"percentageHours\": 3.932638888888889,
\"activityWeekly\": 0,
\"percentageActivityWeekly\": 18,
\"rolTittle\": \"DEV\",
\"rolPriority\": 0,
\"summaryStarts\": 0,
\"percentActivityW\": 74,
\"avergeHourWeekly\": 3.9325
},
{
\"id\": 6418215334,
\"task_id\": 111232314,
\"user_id\": 1726823,
\"keyboard\": 11761,
\"mouse\": 35504,
\"input_tracked\": 73802,
\"manual\": 862,
\"idle\": 0,
\"resumed\": 0,
\"billable\": 74664,
\"created_at\": \"2022-09-01T14:32:20.799309Z\",
\"updated_at\": \"2022-09-02T11:00:48.637118Z\",
\"username\": \"user9\",
\"status\": \"active\",
\"weekly_hours\": 44,
\"three_weekly_hours\": 20,
\"summaryWeekly\": 74664,
\"summaryoverallWeekly\": 43021,
\"dayliHoursDaily\": 8,
\"summaryHoursTrackedWeekly\": 21,
\"percentageHours\": 5.185,
\"activityWeekly\": 0,
\"percentageActivityWeekly\": 14,
\"rolTittle\": \"DEV\",
\"rolPriority\": 0,
\"summaryStarts\": 1,
\"percentActivityW\": 41,
\"avergeHourWeekly\": 5.1850000000000005
},
{
\"id\": 6436683187,
\"task_id\": 110916251,
\"user_id\": 957963,
\"keyboard\": 2050,
\"mouse\": 5530,
\"input_tracked\": 13478,
\"manual\": 1181,
\"idle\": 0,
\"resumed\": 0,
\"billable\": 14659,
\"created_at\": \"2022-09-03T14:05:12.543140Z\",
\"updated_at\": \"2022-09-03T15:39:51.279106Z\",
\"username\": \"user10\",
\"status\": \"active\",
\"weekly_hours\": 44,
\"three_weekly_hours\": 20,
\"summaryWeekly\": 14659,
\"summaryoverallWeekly\": 7182,
\"dayliHoursDaily\": 8,
\"summaryHoursTrackedWeekly\": 4,
\"percentageHours\": 1.017986111111111,
\"activityWeekly\": 0,
\"percentageActivityWeekly\": 12,
\"rolTittle\": \"DEV\",
\"rolPriority\": 0,
\"summaryStarts\": 0,
\"percentActivityW\": 12,
\"avergeHourWeekly\": 1.0175
},
{
\"id\": 6415608216,
\"task_id\": 110169040,
\"user_id\": 1476078,
\"keyboard\": 23401,
\"mouse\": 51185,
\"input_tracked\": 99108,
\"manual\": 0,
\"idle\": 0,
\"resumed\": 0,
\"billable\": 99108,
\"created_at\": \"2022-09-01T06:17:26.341286Z\",
\"updated_at\": \"2022-09-02T02:03:01.258835Z\",
\"username\": \"user11\",
\"status\": \"active\",
\"weekly_hours\": 44,
\"three_weekly_hours\": 20,
\"summaryWeekly\": 99108,
\"summaryoverallWeekly\": 67332,
\"dayliHoursDaily\": 8,
\"summaryHoursTrackedWeekly\": 28,
\"percentageHours\": 6.882499999999999,
\"activityWeekly\": 0,
\"percentageActivityWeekly\": 17,
\"rolTittle\": \"DEV\",
\"rolPriority\": 0,
\"summaryStarts\": 6,
\"percentActivityW\": 48,
\"avergeHourWeekly\": 6.885
},
{
\"id\": 6436711920,
\"task_id\": 111299925,
\"user_id\": 1762379,
\"keyboard\": 9260,
\"mouse\": 27177,
\"input_tracked\": 63034,
\"manual\": 0,
\"idle\": 0,
\"resumed\": 0,
\"billable\": 63034,
\"created_at\": \"2022-09-03T14:37:55.058824Z\",
\"updated_at\": \"2022-09-04T11:00:09.826018Z\",
\"username\": \"user12\",
\"status\": \"active\",
\"weekly_hours\": 44,
\"three_weekly_hours\": 20,
\"summaryWeekly\": 63034,
\"summaryoverallWeekly\": 33416,
\"dayliHoursDaily\": 8,
\"summaryHoursTrackedWeekly\": 18,
\"percentageHours\": 4.377361111111111,
\"activityWeekly\": 0,
\"percentageActivityWeekly\": 13,
\"rolTittle\": \"DEV\",
\"rolPriority\": 0,
\"summaryStarts\": 0,
\"percentActivityW\": 40,
\"avergeHourWeekly\": 4.3774999999999995
},
{
\"id\": 6438388730,
\"task_id\": 111271635,
\"user_id\": 1763812,
\"keyboard\": 8023,
\"mouse\": 34217,
\"input_tracked\": 60716,
\"manual\": 3056,
\"idle\": 0,
\"resumed\": 0,
\"billable\": 63772,
\"created_at\": \"2022-09-04T06:11:14.526669Z\",
\"updated_at\": \"2022-09-04T11:00:10.753741Z\",
\"username\": \"user13\",
\"status\": \"active\",
\"weekly_hours\": 44,
\"three_weekly_hours\": 20,
\"summaryWeekly\": 63772,
\"summaryoverallWeekly\": 39685,
\"dayliHoursDaily\": 8,
\"summaryHoursTrackedWeekly\": 18,
\"percentageHours\": 4.4286111111111115,
\"activityWeekly\": 0,
\"percentageActivityWeekly\": 16,
\"rolTittle\": \"DEV\",
\"rolPriority\": 0,
\"summaryStarts\": 0,
\"percentActivityW\": 66,
\"avergeHourWeekly\": 4.4275
},
{
\"id\": 6436711572,
\"task_id\": 110962406,
\"user_id\": 1512574,
\"keyboard\": 13031,
\"mouse\": 29149,
\"input_tracked\": 58021,
\"manual\": 0,
\"idle\": 0,
\"resumed\": 0,
\"billable\": 58021,
\"created_at\": \"2022-09-03T14:37:32.555344Z\",
\"updated_at\": \"2022-09-04T11:00:12.010515Z\",
\"username\": \"user14\",
\"status\": \"active\",
\"weekly_hours\": 44,
\"three_weekly_hours\": 20,
\"summaryWeekly\": 58021,
\"summaryoverallWeekly\": 35912,
\"dayliHoursDaily\": 8,
\"summaryHoursTrackedWeekly\": 16,
\"percentageHours\": 4.0292361111111115,
\"activityWeekly\": 0,
\"percentageActivityWeekly\": 15,
\"rolTittle\": \"DEV\",
\"rolPriority\": 0,
\"summaryStarts\": 0,
\"percentActivityW\": 46,
\"avergeHourWeekly\": 4.0275
},
{
\"id\": 6429845321,
\"task_id\": 111275770,
\"user_id\": 1597423,
\"keyboard\": 7547,
\"mouse\": 16932,
\"input_tracked\": 45344,
\"manual\": 9000,
\"idle\": 0,
\"resumed\": 0,
\"billable\": 45344,
\"created_at\": \"2022-09-02T15:02:22.445061Z\",
\"updated_at\": \"2022-09-02T21:05:15.892875Z\",
\"username\": \"user15\",
\"status\": \"active\",
\"weekly_hours\": 44,
\"three_weekly_hours\": 20,
\"summaryWeekly\": 54344,
\"summaryoverallWeekly\": 21515,
\"dayliHoursDaily\": 8,
\"summaryHoursTrackedWeekly\": 15,
\"percentageHours\": 3.773888888888889,
\"activityWeekly\": 0,
\"percentageActivityWeekly\": 10,
\"rolTittle\": \"SAC\",
\"rolPriority\": 1,
\"summaryStarts\": 0,
\"percentActivityW\": 32,
\"avergeHourWeekly\": 3.7724999999999995
},
{
\"id\": 6429886569,
\"task_id\": 111300959,
\"user_id\": 1005008,
\"keyboard\": 9124,
\"mouse\": 23219,
\"input_tracked\": 47335,
\"manual\": 16930,
\"idle\": 0,
\"resumed\": 0,
\"billable\": 64265,
\"created_at\": \"2022-09-02T15:10:49.050765Z\",
\"updated_at\": \"2022-09-02T15:37:15.995376Z\",
\"username\": \"user16\",
\"status\": \"active\",
\"weekly_hours\": 44,
\"three_weekly_hours\": 20,
\"summaryWeekly\": 64265,
\"summaryoverallWeekly\": 30503,
\"dayliHoursDaily\": 8,
\"summaryHoursTrackedWeekly\": 18,
\"percentageHours\": 4.462847222222222,
\"activityWeekly\": 0,
\"percentageActivityWeekly\": 12,
\"rolTittle\": \"SAC\",
\"rolPriority\": 1,
\"summaryStarts\": 0,
\"percentActivityW\": 47,
\"avergeHourWeekly\": 4.4625
},
{
\"id\": 6436728901,
\"task_id\": 109755222,
\"user_id\": 1846477,
\"keyboard\": 9644,
\"mouse\": 25906,
\"input_tracked\": 64724,
\"manual\": 0,
\"idle\": 0,
\"resumed\": 0,
\"billable\": 64724,
\"created_at\": \"2022-09-03T14:57:43.250737Z\",
\"updated_at\": \"2022-09-03T19:24:22.872994Z\",
\"username\": \"user18\",
\"status\": \"active\",
\"weekly_hours\": 44,
\"three_weekly_hours\": 20,
\"summaryWeekly\": 64724,
\"summaryoverallWeekly\": 29885,
\"dayliHoursDaily\": 8,
\"summaryHoursTrackedWeekly\": 18,
\"percentageHours\": 4.494722222222222,
\"activityWeekly\": 0,
\"percentageActivityWeekly\": 12,
\"rolTittle\": \"DESIGN\",
\"rolPriority\": 2,
\"summaryStarts\": 0,
\"percentActivityW\": 34,
\"avergeHourWeekly\": 4.495
}
]
const maplabels = apidata.map(element => element.username);
const labels = maplabels;
// DataBar
const mapbarHorizontal = apidata.map(element => element.summaryHoursTrackedWeekly);
const barHorizontal = mapbarHorizontal;
// console.log(\'labels\', barHorizontal);
// LineBar
const maplineBar = apidata.map(element => element.percentActivityW);
const lineBar = maplineBar;
// BarWeeklyHour Colaborador
const mapColbWeekly = apidata.map(element => element.three_weekly_hours);
const colbWeekly = mapColbWeekly;
const subLabels = {
id: \'subLabels\',
afterDatasetsDraw(chart, args, pluginOptions) {
const {
ctx,
chartArea: {
left,
right,
top,
bottom,
width,
height
}
} = chart;
ctx.save();
subLabelText(\'DEV\', width / 4 * 1.6);
subLabelText(\'SAC\', width / 4 * 3.1);
subLabelText(\'DESIGN\', width / 4 * 3.9);
function subLabelText(text, x) {
ctx.font = \'bold 12px sans-serif\';
ctx.fillStyle = \'rgba(102, 102, 102, 1)\';
ctx.textAlign = \'center\';
ctx.fillText(text, x + left, bottom + 144);
let xAxis = chart.scales[\'x-axis-0\'];
let xCenter = (xAxis.left + xAxis.right) / 1.45;
let yBottom = chart.scales[\'y-axis-0\'].bottom;
ctx.strokeStyle = \'lightgray\';
[xAxis.left, xCenter, xAxis.right].forEach(AxisX => {
ctx.beginPath();
ctx.moveTo(AxisX, yBottom);
ctx.lineTo(AxisX, yBottom + 110);
ctx.stroke();
});
ctx.beginPath();
ctx.strokeStyle = \'lightgray\';
ctx.moveTo(width / 4 * 3.95, yBottom);
ctx.lineTo(width / 4 * 3.95, yBottom + 120);
ctx.stroke();
ctx.restore();
}
}
}
const chart = new Chart(document.getElementById(\"chart\"), {
type: \'bar\',
data: {
labels: labels,
datasets: [{
type: \'line\',
label: \'% ACTIVITY\',
backgroundColor: \'#FF7605\',
borderColor: \'#FF7605\',
data: lineBar,
datalabels: {
anchor: \'start\',
align: \'center\',
clamp: true,
backgroundColor: \'#FF7605\',
color: \'white\',
font: {
weight: \'bold\'
}
}
},
{
type: \'bar\',
label: \'WEEKLY SUMMARY OF HOURS\',
backgroundColor: \'#222A35\',
borderColor: \'#222A35\',
data: barHorizontal,
datalabels: {
rotation: 270,
padding: 10,
anchor: \'start\',
align: \'end\'
},
barPercentage: 0.5
},
{
type: \'bar\',
label: \'HOURS\',
backgroundColor: \'#008582\',
borderColor: \'#008582\',
data: colbWeekly,
datalabels: {
anchor: \'end\',
align: \'top\',
clamp: true,
backgroundColor: \'#008582\',
color: \'white\',
font: {
weight: \'bold\'
}
},
barPercentage: 0.5
}
]
},
options: {
plugins: {
datalabels: {
color: \'white\',
font: {
weight: \'bold\'
},
},
title: {
display: true,
text: \'AVERAGE WEEKLY HOURS\'
},
legend: {
position: \'top\',
labels: {
padding: 30,
usePointStyle: true
}
},
},
elements: {
line: {
fill: false
}
},
scales: {
\'x-axis-0\': {
stacked: true,
min: 0,
max: 80,
ticks: {
stepSize: 20,
minRotation: 90,
},
grid: {
display: false
},
// barPercentage: 0.2
},
\'y-axis-0\': {
grid: {
drawOnChartArea: true
}
}
}
},
plugins: [subLabels]
});<script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js\"></script>
<script src=\"https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js\"></script>
<script src=\"https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels\">
</script>
<div>
<div id=\"legend\"></div>
<canvas id=\"chart\"></canvas>
</div>-
Hello how are you? Wishing you a pleasant day,你真的想知道吗？ -
你好，对不起，我没有正确介绍自己，我真的很抱歉，我的英语不是很好，但我真的需要帮助，我一直在寻找一段时间，并且我知道这个社区相当广泛
-
我平时有这样打招呼和自我介绍的习惯，我觉得用英文不正确：c
标签： javascript html node.js plugins chart.js