Chart.js是一个JavaScript库，用于创建包含在网页上的动画交互式图形
如何在 Chartjs 3.1 中的两条特定行之间添加背景颜色
我想在两条特定线之间添加背景颜色。 就像这张图片。 我如何在两条线之间添加背景颜色。如果您检查了图像，我需要在两个 l 之间设置背景颜色...
任务状态条形图 <!DOCTYPE html> <html> <head> <title>Task Status Bar Chart</title> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> </head> <body> <canvas id="myChart"></canvas> <script> var ctx = document.getElementById('myChart').getContext('2d'); var myChart = new Chart(ctx, { type: 'bar', data: { labels: ['ToDo', 'InProgress', 'Done'], datasets: [ { label: 'Under Review', data: [ [10, 5, 0], // Blocker [20, 10, 5], // High [5, 10, 20], // Low [5, 5, 10], // Critical [10, 15, 15] // Medium ], backgroundColor: [ 'rgba(255, 99, 132, 0.5)', 'rgba(54, 162, 235, 0.5)', 'rgba(255, 206, 86, 0.5)', 'rgba(75, 192, 192, 0.5)', 'rgba(153, 102, 255, 0.5)' ], borderColor: [ 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)' ], borderWidth: 1 }, { label: 'In Progress', data: [ [10, 5, 0], // Blocker [20, 10, 5], // High [5, 10, 20], // Low [5, 5, 10], // Critical [10, 15, 15] // Medium ], backgroundColor: [ 'rgba(255, 99, 132, 0.5)', 'rgba(54, 162, 235, 0.5)', 'rgba(255, 206, 86, 0.5)', 'rgba(75, 192, 192, 0.5)', 'rgba(153, 102, 255, 0.5)' ], borderColor: [ 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)' ], borderWidth: 1 }, { label: 'New', data: [ [10, 5, 0], // Blocker [20, 10, 5], // High [5, 10, 20], // Low [5, 5, 10], // Critical [10, 15, 15] // Medium ], backgroundColor: [ 'rgba(255, 99, 132, 0.5)', 'rgba(54, 162, 235, 0.5)', 'rgba(255, 206, 86, 0.5)', 'rgba(75, 192, 192, 0.5)', 'rgba(153, 102, 255, 0.5)' ], borderColor: [ 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)' ], borderWidth: 1 }, { label: 'Completed', data: [ [10, 5, 0], // Blocker [20, 10, 5], // High [5, 10, 20], // Low [5, 5, 10], // Critical [10, 15, 15] // Medium ], backgroundColor: [ 'rgba(255, 99, 132, 0.5)', 'rgba(54, 162, 235, 0.5)', 'rgba(255, 206, 86, 0.5)', 'rgba(75, 192, 192, 0.5)', 'rgba(153, 102, 255, 0.5)' ], borderColor: [ 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)' ], borderWidth: 1 } ] }, options: { indexAxis: 'y', scales: { x: { stacked: false }, y: { stacked: false } } } }); </script> </body> </html> 结果如下： 输出 我期待这样的事情： 期待 我期待一个堆叠分组图表：例如： X 轴：待办事项、进行中、完成 每个 x 轴标签有 4 个堆栈：[正在审核、正在进行、新建、已完成] 3 - 4 现在每个堆栈有 5 个数据点：[Blocked、High、Critical、Low、Medium] 4 - 5 您可以使用带组的堆叠条形图，它允许您拥有堆叠条形图并控制数据的分组方式。 使用这种方法，您将需要为每个堆栈中的每个数据点拥有不同的数据条目。这意味着您需要为“正在审核”、“进行中”、“新建”和“已完成”堆栈定义“已阻止”数据。 您还需要使用一个名为 chartjs-plugin-datalabels 的插件，它允许您标记不同的组/堆栈。 所包含代码的两个已知问题： 当文本隐藏时，单击图例不会删除图例文本。 当第一个数据集元素隐藏时，堆栈标签消失。 代码如下： // Register the plugin (chartjs-plugin-datalabels). // Needed for the stack labels to work. Chart.register(ChartDataLabels); var ctx = document.getElementById('myChart').getContext('2d'); var myChart = new Chart(ctx, { type: 'bar', data: { labels: ['ToDo', 'InProgress', 'Done'], datasets: [{ label: 'Blocker', data: [10, 5, 0], borderWidth: 1, backgroundColor: 'rgba(255, 99, 132, 0.5)', borderColor: 'rgba(255, 99, 132, 1)', stack: 'Under Review', }, { label: 'High', data: [20, 10, 5], borderWidth: 1, backgroundColor: 'rgba(54, 162, 235, 0.5)', borderColor: 'rgba(54, 162, 235, 1)', stack: 'Under Review', }, { label: 'Low', data: [5, 10, 20], borderWidth: 1, backgroundColor: 'rgba(75, 192, 192, 0.5)', borderColor: 'rgba(75, 192, 192, 1)', stack: 'Under Review', }, { label: 'Critical', data: [5, 5, 10], borderWidth: 1, backgroundColor: 'rgba(255, 206, 86, 0.5)', borderColor: 'rgba(255, 206, 86, 1)', stack: 'Under Review', }, { label: 'Medium', data: [10, 15, 15], borderWidth: 1, backgroundColor: 'rgba(153, 102, 255, 0.5)', borderColor: 'rgba(153, 102, 255, 1)', stack: 'Under Review', }, { label: 'Blocker', data: [0, 25, 10], borderWidth: 1, backgroundColor: 'rgba(255, 99, 132, 0.5)', borderColor: 'rgba(255, 99, 132, 1)', stack: 'In Progress', }, { label: 'High', data: [2, 8, 6], borderWidth: 1, backgroundColor: 'rgba(54, 162, 235, 0.5)', borderColor: 'rgba(54, 162, 235, 1)', stack: 'In Progress', }, { label: 'Low', data: [15, 0, 9], borderWidth: 1, backgroundColor: 'rgba(75, 192, 192, 0.5)', borderColor: 'rgba(75, 192, 192, 1)', stack: 'In Progress', }, { label: 'Critical', data: [12, 6, 18], borderWidth: 1, backgroundColor: 'rgba(255, 206, 86, 0.5)', borderColor: 'rgba(255, 206, 86, 1)', stack: 'In Progress', }, { label: 'Medium', data: [3, 4, 7], borderWidth: 1, backgroundColor: 'rgba(153, 102, 255, 0.5)', borderColor: 'rgba(153, 102, 255, 1)', stack: 'In Progress', }, { label: 'Blocker', data: [10, 5, 0], borderWidth: 1, backgroundColor: 'rgba(255, 99, 132, 0.5)', borderColor: 'rgba(255, 99, 132, 1)', stack: 'New', }, { label: 'High', data: [20, 10, 5], borderWidth: 1, backgroundColor: 'rgba(54, 162, 235, 0.5)', borderColor: 'rgba(54, 162, 235, 1)', stack: 'New', }, { label: 'Low', data: [5, 10, 20], borderWidth: 1, backgroundColor: 'rgba(75, 192, 192, 0.5)', borderColor: 'rgba(75, 192, 192, 1)', stack: 'New', }, { label: 'Critical', data: [5, 5, 10], borderWidth: 1, backgroundColor: 'rgba(255, 206, 86, 0.5)', borderColor: 'rgba(255, 206, 86, 1)', stack: 'New', }, { label: 'Medium', data: [10, 15, 15], borderWidth: 1, backgroundColor: 'rgba(153, 102, 255, 0.5)', borderColor: 'rgba(153, 102, 255, 1)', stack: 'New', }, { label: 'Blocker', data: [0, 25, 10], borderWidth: 1, backgroundColor: 'rgba(255, 99, 132, 0.5)', borderColor: 'rgba(255, 99, 132, 1)', stack: 'Completed', }, { label: 'High', data: [2, 8, 6], borderWidth: 1, backgroundColor: 'rgba(54, 162, 235, 0.5)', borderColor: 'rgba(54, 162, 235, 1)', stack: 'Completed', }, { label: 'Low', data: [15, 0, 9], borderWidth: 1, backgroundColor: 'rgba(75, 192, 192, 0.5)', borderColor: 'rgba(75, 192, 192, 1)', stack: 'Completed', }, { label: 'Critical', data: [12, 6, 18], borderWidth: 1, backgroundColor: 'rgba(255, 206, 86, 0.5)', borderColor: 'rgba(255, 206, 86, 1)', stack: 'Completed', }, { label: 'Medium', data: [3, 4, 7], borderWidth: 1, backgroundColor: 'rgba(153, 102, 255, 0.5)', borderColor: 'rgba(153, 102, 255, 1)', stack: 'Completed', }, ], }, interaction: { intersect: false, }, options: { plugins: { // Configuration of the datalabels plugin datalabels: { align: "start", anchor: "start", color: "black", formatter: function(value, context) { let ds = context.chart.data.datasets; // Check if it's the first dataset if (ds[context.datasetIndex - 1]) { // Check if the dataset is in the same stack as the dataset before if ( ds[context.datasetIndex - 1].stack === ds[context.datasetIndex].stack ) { return ""; } else { return ds[context.datasetIndex].stack; } } else { return ds[context.datasetIndex].stack; } } }, legend: { // Since the labels defined below point only to single datasets, // we use this to show/hide all datasets with the same label. onClick: function(e, legendItem, legend) { const ci = legend.chart; const numberOfIndeces = ci.data.datasets.length; let initIndex = legendItem.datasetIndex; // Loop over all datasets corresponding to the label that has // been clicked on. while (initIndex < numberOfIndeces) { let index = initIndex; if (ci.isDatasetVisible(index)) { ci.hide(index); legendItem.hidden = true; } else { ci.show(index); legendItem.hidden = false; } // 5 matches the number of different categories we have // i.e., Blocker, High, Low, Critical, Medium. initIndex += 5; } }, labels: { // Manually override the labels returned. // Failure to do this will lead to duplicated labels. generateLabels: function(chart) { return [{ text: 'Blocker', fillStyle: 'rgba(255, 99, 132, 0.5)', strokeStyle: 'rgba(255, 99, 132, 1)', datasetIndex: 0, lineWidth: 1, hidden: false, }, { text: 'High', fillStyle: 'rgba(54, 162, 235, 0.5)', strokeStyle: 'rgba(54, 162, 235, 1)', datasetIndex: 1, lineWidth: 1, hidden: false, }, { text: 'Low', fillStyle: 'rgba(75, 192, 192, 0.5)', strokeStyle: 'rgba(75, 192, 192, 1)', datasetIndex: 2, lineWidth: 1, hidden: false, }, { text: 'Critical', fillStyle: 'rgba(255, 206, 86, 0.5)', strokeStyle: 'rgba(255, 206, 86, 1)', datasetIndex: 3, lineWidth: 1, hidden: false, }, { text: 'Medium', fillStyle: 'rgba(153, 102, 255, 0.5)', strokeStyle: 'rgba(153, 102, 255, 1)', datasetIndex: 4, lineWidth: 1, hidden: false, }, ] } } } }, scales: { x: { stacked: true, ticks: { callback: function(value, index, ticks) { // Hide the default label return '' } } }, // Display the main label beneath the stack labels x2: { border: { display: false }, grid: { display: false } }, y: { stacked: true } } } }); <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script> <canvas id="myChart"></canvas> 您需要在代码中删除 indexAxis: 'y', 才能正确显示轴。
我想在我的 Laravel 项目中安装 Chart.js。使用 npm install（Webpack 的配置），并查看我的索引页和一些 Chart.js 示例。在我第一次尝试时，我在浏览器中收到此错误。我...
如何在 Chart.js 中将 Ticks 格式化程序与 Typescript 结合使用？
如果我使 Chart.js 使用美国地区设置，我会得到最佳格式的比例数字。 如果我像文档中那样使用刻度回调： 刻度线：{ 回调：函数（值）{ 返回值.至...
我在创建折线图时遇到了图表js上的问题。我想创建一个具有指定数据的图表，并且当我将鼠标悬停在交叉点上时还需要有水平线和垂直线...
使用React和Chart.js在网格纸上绘制PQRST心电图波形
问题： 我目前正在开发一个 React 项目，我需要在网格纸上使用 Chart.js 绘制 PQRST ECG 波形。我已经成功创建了一个基本的折线图，但我无法实现......
我正在尝试使用 ChartJS 创建分组堆积条形图。在我的数据集中，有 2 个组：A 组和 B 组。A 组渲染正确，但由于某种原因，B 组（灰色...
我在我的角度应用程序中显示垂直条形图。我添加了工具提示来显示悬停时栏的值。有时悬停效果很好，但有时将鼠标悬停在栏上时该工具......
我正在使用 Chart.js 我想要一个半圆环图，如下图所示。但我没能改变馅饼的厚度。我尝试了属性innerRadius但它仍然不起作用 这是我的
我尝试将chart.js图像转换为url，然后使用ajax发布它，如果ajax和图像保存功能在同一个php文件中，则成功。我尝试将网址发布到另一个文件，但不是同一个文件，而是......
在 Chart.js 4.4.2 中移动到不同大小的容器时，图表不会调整大小
我有两张并排的图表，左边一张大，右边一张小，每个图表都在自己的容器中。单击小图表时，我希望图表交换位置，以便小
根据文档，Chartjs (v4) 网格样式是使用 options.scales[scaleId].grid 命名空间控制的。我可以使用以下语句来全局控制选择元素的样式：
鉴于以下图表，我如何显示 Y 刻度线的自定义 HTML 标签？ 常量 yAxisLabelsLookup = { 0：{ 标签：'2024-01-01'， 红色'， }, 1：{ 标签：'202...
有没有办法在chartjs中展开圆环图onclick事件或鼠标悬停的切片？ 我使用的是[email protected]版本。
使用React js创建一个可以读取.csv文件并在chartjs中显示的网站
我尝试了这个，但不断收到此错误“错误：画布已在使用中。必须先销毁 ID 为“0”的图表，然后才能重新使用画布。”，即使我使用了 destroy 也不起作用。 我是
如何在 Filament 中使用 ChartJs 创建堆叠条形图？
美好的一天，我需要您的帮助/指导来使用 Laravel Filament 中的 Chartjs 创建堆叠条形图。我有一个名为“任务”的表，它与“客户”表有关系。 e 的字段...
配置 Chart.js 在 Node.js 中渲染图表时在 x 轴刻度上显示小时
我正在使用图表js在节点中生成图表图像我如何在刻度上使用小时有什么想法吗 错误：未实现此方法：检查是否提供了完整的日期适配器。
当我尝试在 odoo 模块中使用 moment 时，它遇到了如下错误： 以下模块是其他模块所需要的，但尚未定义，它们可能不存在于正确的资产中...
我想做的是使用toDataURL将chart.js转换为图像，然后使用ajax传递它并使用url设置php excel的图像路径。我想在不使用任何按钮和我的 php 的情况下传递数据
我尝试发布使用ajax转换为url的图像。问题是 $image = $_POST['imgData'];不显示任何内容，但如果我检查网络预览上的开发人员工具，则可以看到数据。 ...