Chart.js是一个JavaScript库,用于创建包含在网页上的动画交互式图形
我正在尝试使用 ChartJS 折线图创建看起来像这样的东西。我已经让顶部渐变按我想要的方式工作,我只是找不到一种方法来让底部渐变在我的数据
我有过去 36 小时的数据记录。这些应该显示在我的 Chart.js -Chart 中,以便每 30 分钟显示一次。如果数据集落在 xx:45,则不应四舍五入为...
使用Chartjs,我有以下数据库和选项 # 数据集 公共 lineChartData: ChartConfiguration["数据"]["数据集"] = [ { 标签:“尝试”, ...
我有一个使用Webpack的Vue JS项目,需要导入Chart.js。我努力了 // 从 'chart.js/Chart.min.js' 导入图表 当尝试使用该库时,这会导致 js 错误。
Chart.js 错误:您可能需要适当的加载器来处理此文件类型
我目前正在尝试在我的 React 应用程序中使用 Chart.js,但是当我去构建我的应用程序时,我遇到了这个错误 ./node_modules/chart.js/dist/chart.esm.js 中出现错误 模块...
我想知道是否有办法导出我的 Chart.js 动画。我创建了一个统计网站,并向条形图添加了“延迟”动画。您可以在此处查看示例:https://scrap...
如何在 Chartjs (PrimeNG) 中为图例添加边距顶部
我的图例位于图表底部,但图表和图例之间的空间太小, 如何为图例、图表添加边距或填充? 这是我的饼图选项,我有广告...
我正在尝试找出如何在图表区域添加边框,但似乎我发现的所有内容仅适用于数据集和整个图表。下面的代码不起作用。 这是我的代码: var myChart =...
卡在一个chart.js项目上,因为文档似乎不是特别清楚。 只是尝试从图表中删除网格线。我尝试了堆栈溢出中引用的旧语法:
如何在 FusionCharts 中的堆积柱形图的工具提示中仅显示突出显示的堆栈值
我正在 JavaScript 中使用 FusionCharts 创建堆积柱形图。当我将鼠标悬停在图表中的任何堆栈上时,工具提示会显示堆栈的突出显示值以及非突出显示...
Chart.js v2.9.4 我在数据 -> 数据集 -> 标签中有一些内容,但我只想隐藏上方标签之一的文本。 我需要这样的东西:Hide labels from pie Chart in ChartJS -...
如何在 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但它仍然不起作用 这是我的