本文将指导您如何利用 Chart.js 创建一种特殊的堆叠柱状图，以直观地展示任务或指标的当前进度及其距离预设目标（例如60）的差距。通过动态计算所需剩余量并将其作为独立的堆叠部分呈现，当目标达成或超越时，表示差距的红色柱状部分将自动消失，从而提供清晰的目标达成度可视化。
在数据可视化中，展示一个值距离某个目标还有多远是一种常见的需求。传统的柱状图可能只显示当前值，但如果能同时在一个柱状图中直观地看到“已完成”和“还需完成”两部分，将大大提升图表的信息传达效率。本教程将详细介绍如何使用强大的 chart.js 库来实现这种带有目标完成度指示的堆叠柱状图。
核心概念：目标达成度可视化
我们的目标是创建一个堆叠柱状图，其中：
已完成量：代表当前的已完成进度，例如使用蓝色柱体。距离目标量：代表距离预设目标还需完成的量，例如使用红色柱体。智能隐藏：当当前完成量达到或超过目标时，表示“距离目标量”的红色柱体应自动消失，只显示已完成的蓝色柱体。
例如，假设我们的目标是 60。如果当前值是 40，图表应显示 40 的蓝色部分和 20 的红色部分。如果当前值是 60 或 70，则只显示 60 或 70 的蓝色部分，不显示红色部分。
Chart.js 基础设置回顾
在深入实现之前，我们先回顾一个基本的 Chart.js 柱状图结构。通常，我们需要一个 canvas> 元素作为图表的容器，并通过 JavaScript 初始化 Chart 实例，传入数据和配置。
(function() { const ctx = document.getElementById("mychart"); const datas = { labels: ['通过', '失败', '进行中'], datasets: [{ label: '数据', data: [10, 5, 80], backgroundColor: [ "green", "red", "yellow" ], }, ] }; const chr = new Chart(ctx, { data: datas, type: 'bar' });})();
上述代码展示了一个简单的柱状图，但它并未实现我们所需的目标完成度可视化功能。
实现目标堆叠柱状图
要实现目标完成度堆叠柱状图，关键在于数据预处理。我们需要在将数据传递给 Chart.js 之前，计算出每个数据点距离目标的剩余量，并将其作为一个独立的 dataset 添加到图表中。
数据处理逻辑
假设我们的目标值是 60。对于原始数据集中的每个数据点 currentValue：
如果 currentValue 大于或等于 60（目标已达成或超越），那么剩余量为 0。如果 currentValue 小于 60（目标尚未达成），那么剩余量为 60 – currentValue。
这个计算可以通过 Array.prototype.map() 方法高效完成。
const targetValue = 60; // 定义目标值const originalData = datas.datasets[0].data; // 获取原始数据const remainingData = originalData.map(currentValue => { return currentValue >= targetValue ? 0 : targetValue - currentValue;});
构建新的数据集
计算出 remainingData 后，我们需要将其作为一个新的 dataset 添加到 datas.datasets 数组中。这个新的数据集将代表“距离目标量”的部分，并应使用一个醒目的颜色，例如红色。
datas.datasets.push({ label: '距离目标', // 新数据集的标签 backgroundColor: 'red', // 剩余量的颜色 data: remainingData // 剩余量数据});
Chart.js 在处理多个 type: ‘bar’ 的 dataset 时，默认会将其堆叠起来，除非显式设置 options.scales.x.stacked: false 或 options.scales.y.stacked: false。这正是我们想要的效果。
完整代码示例
将上述逻辑整合到 Chart.js 的初始化代码中：
Chart.js 目标完成度堆叠柱状图 body { font-family: sans-serif; margin: 0; padding: 20px; background-color: #f4f7f6; } .chart-container { width: 80%; /* 调整图表容器宽度 */ max-width: 800px; /* 最大宽度限制 */ height: 400px; /* 调整图表容器高度 */ margin: 20px auto; background-color: #ffffff; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); padding: 20px; box-sizing: border-box; } h1 { text-align: center; color: #333; margin-bottom: 30px; }Chart.js 目标完成度堆叠柱状图示例
(function() { const ctx = document.getElementById("mychart"); const targetValue = 60; // 定义目标值 const datas = { labels: ['任务A', '任务B', '任务C', '任务D', '任务E'], datasets: [{ label: '当前进度', data: [10, 65, 40, 60, 25], // 示例数据：任务B已超目标，任务D刚好达到目标 backgroundColor: [ "rgba(54, 162, 235, 0.8)", // 蓝色 "rgba(54, 162, 235, 0.8)", "rgba(54, 162, 235, 0.8)", "rgba(54, 162, 235, 0.8)", "rgba(54, 162, 235, 0.8)" ], }] }; // 计算距离目标的剩余量 const remainingData = datas.datasets[0].data.map(currentValue => { return currentValue >= targetValue ? 0 : targetValue - currentValue; }); // 添加表示剩余量的新数据集 datas.datasets.push({ label: '距离目标', backgroundColor: 'rgba(255, 99, 132, 0.8)', // 红色 data: remainingData }); const chr = new Chart(ctx, { data: datas, type: 'bar', options: { responsive: true, maintainAspectRatio: false, plugins: { title: { display: true, text: '任务进度与目标达成度', font: { size: 18, weight: 'bold' }, color: '#333' }, legend: { position: 'top', labels: { font: { size: 14 } } }, tooltip: { callbacks: { label: function(context) { let label = context.dataset.label || ''; if (label) { label += ': '; } if (context.dataset.label === '当前进度') { label += context.raw; } else { // 距离目标 if (context.raw > 0) { label += context.raw; } else { label += '目标已达成'; } } return label; } } } }, scales: { x: { stacked: true, // 确保X轴堆叠 title: { display: true, text: '任务', font: { size: 16 }, color: '#555' }, ticks: { font: { size: 12 } } }, y: { stacked: true, // 确保Y轴堆叠 beginAtZero: true, // 动态设置Y轴最大值，确保目标值可见且图表不过高 max: Math.max(targetValue, ...datas.datasets[0].data) + 10, title: { display: true, text: '进度值', font: { size: 16 }, color: '#555' }, ticks: { font: { size: 12 }
以上就是使用 Chart.js 构建目标完成度堆叠柱状图的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1580708.html
微信扫一扫 
支付宝扫一扫 
