[英]Grouping x-axis labels on multiple lines on a ChartJS with an extra dimension
请帮我
我有下图，其中每个用户属于不同的区域
我想知道是否有办法按“用户角色”对信息进行分组，一旦分组，在“x”轴上用一条线分隔
我很困惑，因为据推测是否可以根据这个问题中接受的答案来做
但是根据社区的其他答案，chartjs 是不可能的
如何使它成为可能？ 它被称为多级类别标签
所以我希望能够修改 X-Scale 中标签的网格以通过一条线分隔区域并添加一个子标签。 像这样的东西：
我留下了json和我的图表的代码，我使用 charjs-node-canvas 来配置它，并使用 chartjs-plugin-datalabels 来修改我的图表的标签。 我正在使用的技术是 nodejs 与 express 使用 typescript 和我的 HTML 模板我使用 Handlebars
const canvasRenderService = new ChartJSNodeCanvas({
width: 1000,
height: 650,
chartCallback: (ChartJS) => {
ChartJS.register(require('chartjs-plugin-datalabels'))
}
});
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
}
},
{
type: 'bar',
label: 'HOURS',
backgroundColor: '#008582',
borderColor: '#008582',
data: colbWeekly,
datalabels: {
anchor: 'end',
align: 'top',
clamp: true,
backgroundColor: '#008582',
color: 'white',
font: {
weight: 'bold'
}
}
}]
},
options: {
plugins: {
datalabels: {
color: 'white',
font: {
weight: 'bold'
},
},
title: {
display: true,
text: 'AVERAGE WEEKLY HOURS'
}
},
elements: {
line: {
fill: false
}
},
scales: {
x: {
stacked: true,
ticks: {
minRotation: 90
},
grid: {
display: false
}
}
}
}
});
演示
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": 6418406327, "task_id": 110056072, "user_id": 1005014, "keyboard": 3338, "mouse": 24665, "input_tracked": 51343, "manual": 0, "idle": 0, "resumed": 0, "billable": 51343, "created_at": "2022-09-01T15:01:36.521321Z", "updated_at": "2022-09-01T15:35:14.010868Z", "username": "user17", "status": "active", "weekly_hours": 44, "three_weekly_hours": 20, "summaryWeekly": 51343, "summaryoverallWeekly": 27397, "dayliHoursDaily": 8, "summaryHoursTrackedWeekly": 14, "percentageHours": 3.565486111111111, "activityWeekly": 0, "percentageActivityWeekly": 13, "rolTittle": "SAC", "rolPriority": 1, "summaryStarts": 0, "percentActivityW": 62, "avergeHourWeekly": 3.5649999999999995 }, { "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 }, { "id": null, "task_id": null, "user_id": 1886674, "keyboard": 0, "mouse": 0, "input_tracked": 0, "manual": 0, "idle": 0, "resumed": 0, "billable": 0, "created_at": null, "updated_at": null, "username": "user19", "status": "active", "weekly_hours": 12.5, "three_weekly_hours": 7, "summaryWeekly": 0, "summaryoverallWeekly": 0, "dayliHoursDaily": 3, "summaryHoursTrackedWeekly": 0, "percentageHours": 0, "activityWeekly": 0, "percentageActivityWeekly": 0, "rolTittle": "DESIGN", "rolPriority": 2, "summaryStarts": 0, "percentActivityW": 0, "avergeHourWeekly": 0 }, { "id": null, "task_id": null, "user_id": 1931414, "keyboard": 0, "mouse": 0, "input_tracked": 0, "manual": 0, "idle": 0, "resumed": 0, "billable": 0, "created_at": null, "updated_at": null, "username": "user20", "status": "active", "weekly_hours": 12.5, "three_weekly_hours": 7, "summaryWeekly": 0, "summaryoverallWeekly": 0, "dayliHoursDaily": 3, "summaryHoursTrackedWeekly": 0, "percentageHours": 0, "activityWeekly": 0, "percentageActivityWeekly": 0, "rolTittle": "DESIGN", "rolPriority": 2, "summaryStarts": 0, "percentActivityW": 0, "avergeHourWeekly": 0 }, { "id": null, "task_id": null, "user_id": 766827, "keyboard": 0, "mouse": 0, "input_tracked": 0, "manual": 0, "idle": 0, "resumed": 0, "billable": 0, "created_at": null, "updated_at": null, "username": "user21", "status": "active", "weekly_hours": 12.5, "three_weekly_hours": 7, "summaryWeekly": 0, "summaryoverallWeekly": 0, "dayliHoursDaily": 3, "summaryHoursTrackedWeekly": 0, "percentageHours": 0, "activityWeekly": 0, "percentageActivityWeekly": 0, "rolTittle": "DESIGN", "rolPriority": 2, "summaryStarts": 0, "percentActivityW": 0, "avergeHourWeekly": 0 } ] 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 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 } }, { type: 'bar', label: 'HOURS', backgroundColor: '#008582', borderColor: '#008582', data: colbWeekly, datalabels: { anchor: 'end', align: 'top', clamp: true, backgroundColor: '#008582', color: 'white', font: { weight: 'bold' } } } ] }, options: { plugins: { datalabels: { color: 'white', font: { weight: 'bold' }, }, title: { display: true, text: 'AVERAGE WEEKLY HOURS' } }, elements: { line: { fill: false } }, scales: { x: { stacked: true, ticks: { minRotation: 90 }, grid: { display: false } } } } });
<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>
为了对信息进行分组，最后我唯一做的就是为我的余额分配一个 AxisID，以便能够在它们上进行绘制，从而使用线条来分隔我的信息并添加子标签
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": 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": 6418406327, "task_id": 110056072, "user_id": 1005014, "keyboard": 3338, "mouse": 24665, "input_tracked": 51343, "manual": 0, "idle": 0, "resumed": 0, "billable": 51343, "created_at": "2022-09-01T15:01:36.521321Z", "updated_at": "2022-09-01T15:35:14.010868Z", "username": "user17", "status": "active", "weekly_hours": 44, "three_weekly_hours": 20, "summaryWeekly": 51343, "summaryoverallWeekly": 27397, "dayliHoursDaily": 8, "summaryHoursTrackedWeekly": 14, "percentageHours": 3.565486111111111, "activityWeekly": 0, "percentageActivityWeekly": 13, "rolTittle": "SAC", "rolPriority": 1, "summaryStarts": 0, "percentActivityW": 62, "avergeHourWeekly": 3.5649999999999995 }, { "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 }, { "id": null, "task_id": null, "user_id": 1886674, "keyboard": 0, "mouse": 0, "input_tracked": 0, "manual": 0, "idle": 0, "resumed": 0, "billable": 0, "created_at": null, "updated_at": null, "username": "user19", "status": "active", "weekly_hours": 12.5, "three_weekly_hours": 7, "summaryWeekly": 0, "summaryoverallWeekly": 0, "dayliHoursDaily": 3, "summaryHoursTrackedWeekly": 0, "percentageHours": 0, "activityWeekly": 0, "percentageActivityWeekly": 0, "rolTittle": "DESIGN", "rolPriority": 2, "summaryStarts": 0, "percentActivityW": 0, "avergeHourWeekly": 0 }, { "id": null, "task_id": null, "user_id": 1931414, "keyboard": 0, "mouse": 0, "input_tracked": 0, "manual": 0, "idle": 0, "resumed": 0, "billable": 0, "created_at": null, "updated_at": null, "username": "user20", "status": "active", "weekly_hours": 12.5, "three_weekly_hours": 7, "summaryWeekly": 0, "summaryoverallWeekly": 0, "dayliHoursDaily": 3, "summaryHoursTrackedWeekly": 0, "percentageHours": 0, "activityWeekly": 0, "percentageActivityWeekly": 0, "rolTittle": "DESIGN", "rolPriority": 2, "summaryStarts": 0, "percentActivityW": 0, "avergeHourWeekly": 0 }, { "id": null, "task_id": null, "user_id": 766827, "keyboard": 0, "mouse": 0, "input_tracked": 0, "manual": 0, "idle": 0, "resumed": 0, "billable": 0, "created_at": null, "updated_at": null, "username": "user21", "status": "active", "weekly_hours": 12.5, "three_weekly_hours": 7, "summaryWeekly": 0, "summaryoverallWeekly": 0, "dayliHoursDaily": 3, "summaryHoursTrackedWeekly": 0, "percentageHours": 0, "activityWeekly": 0, "percentageActivityWeekly": 0, "rolTittle": "DESIGN", "rolPriority": 2, "summaryStarts": 0, "percentActivityW": 0, "avergeHourWeekly": 0 } ] 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.5); subLabelText('SAC', width / 4 * 3.1); subLabelText('DESIGN', width / 4 * 3.7); 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(x => { ctx.beginPath(); ctx.moveTo(x, yBottom); ctx.lineTo(x, yBottom + 110); ctx.stroke(); }); ctx.beginPath(); ctx.strokeStyle = 'lightgray'; ctx.moveTo(width / 4 * 3.45, yBottom); ctx.lineTo(width / 4 * 3.45, yBottom + 110); 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 } }, { type: 'bar', label: 'HOURS', backgroundColor: '#008582', borderColor: '#008582', data: colbWeekly, datalabels: { anchor: 'end', align: 'top', clamp: true, backgroundColor: '#008582', color: 'white', font: { weight: 'bold' } } } ] }, options: { plugins: { datalabels: { color: 'white', font: { weight: 'bold' }, }, title: { display: true, text: 'AVERAGE WEEKLY HOURS' } }, elements: { line: { fill: false } }, scales: { 'x-axis-0': { stacked: true, min: 0, max: 80, ticks: { stepSize: 20, minRotation: 90 }, grid: { display: false } }, 'y-axis-0': { grid: { drawOnChartArea: true } } } }, plugins: [subLabels] });
<.DOCTYPE html> <html> <head> <script src="/scripts/snippet-javascript-console.min?js:v=1"></script> </head> <body> <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@2.0.0"></script> <canvas id="chart" height="200"></canvas> </body>
Chartjs annotations-plugin：我可以在同名的 x 轴标签上添加多条垂直线吗？
[英]Chartjs annotations-plugin: Can I add multiple vertical lines to identically named x-axis labels?
如何使用chartjs将x轴值和线点移动到两条x轴线的中间？
[英]How to move the x-axis values and line points to the middle of two x-axis lines using chartjs?
ChartJS 在 X 轴标签中换行 '\\n' 或使用 ChartJS V2 在图表或工具提示周围显示更多信息
[英]ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.