图表Js，在选择时加载数据，但在悬停时也显示旧值的条形图
基础概念
图表Js（Chart.js）是一个基于HTML5 Canvas的开源JavaScript库，用于创建各种类型的图表，如条形图、折线图、饼图等。它提供了丰富的配置选项和插件系统，使得开发者可以轻松地定制和扩展图表功能。
相关优势
- 简单易用：Chart.js提供了简洁的API，使得创建图表变得非常容易。
- 高度可定制：通过配置选项和插件系统，可以轻松定制图表的外观和行为。
- 响应式设计：图表会自动适应不同的屏幕尺寸和设备类型。
- 丰富的图表类型：支持多种常见的图表类型，满足不同的数据可视化需求。
类型
Chart.js支持多种类型的图表，包括但不限于：
- 条形图（Bar Chart）
- 折线图（Line Chart）
- 饼图（Pie Chart）
- 散点图（Scatter Chart）
- 框图（Box Plot）
应用场景
图表Js广泛应用于各种数据可视化场景，如：
- 数据报告和分析
- 仪表盘和监控系统
- 业务数据展示
- 教育和培训材料
问题描述及解决方案
问题描述
在使用Chart.js创建条形图时，选择时会加载新数据，但在悬停时显示旧值的条形图。
原因
这个问题通常是由于数据更新后，图表的渲染没有及时更新导致的。Chart.js在数据更新后需要重新渲染图表，以确保显示最新的数据。
解决方案
- 更新数据并重新渲染图表：
在更新数据后，调用图表的
update方法来重新渲染图表。 - 更新数据并重新渲染图表：
在更新数据后，调用图表的
update方法来重新渲染图表。 - 确保数据同步： 确保在更新数据时，所有相关的数据源都已经同步更新，避免出现数据不一致的情况。
- 使用事件监听： 可以通过事件监听来确保在数据更新后，图表能够及时响应并更新。
- 使用事件监听： 可以通过事件监听来确保在数据更新后，图表能够及时响应并更新。
示例代码
以下是一个简单的示例，展示如何在数据更新后重新渲染条形图：
<!DOCTYPE html>
<html>
<head>
<title>Chart.js Bar Chart Example</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: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
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)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
// 模拟数据更新
setTimeout(function() {
myChart.data.datasets[0].data = [6, 11, 13, 8, 4, 7];
myChart.update();
}, 2000);
</script>
</body>
</html>参考链接
通过以上方法，可以确保在数据更新后，图表能够及时显示最新的数据，避免悬停时显示旧值的问题。
相关·内容
我正在尝试动态更新图表。我通过另一个名称(# cellname )的js从数据库中获得了不同的值，在data.php (ajax正在调用它)中也有相互之间的单元名称和吞吐量。无论何时做出新的选择，下面的脚本运行良好，除了当我在图形上移动鼠标时，它也显示旧的图形，不知何故，我缺乏使用图表更新功能。
浏览 13提问于2020-05-03得票数 0
回答已采纳
1回答
图表与鼠标悬停时的旧值重叠
、、、、
我使用Chart Js来显示条形图。它的值在DropDownList的onChange事件上刷新。第一次正确加载。但是，在更改DropDownList中的值时，它会加载新值，而不清除以前的数据。现在，通常它会呈现新的新值。当鼠标悬停时，它<
浏览 12提问于2019-11-20得票数 1
在我的代码中使用r透视函数。R透视提供给我们现成的图形选项，我们可以选择。热图2.条形图3.树形图4.水平叠加条形图等.例如，当选择“水平条形图”时，每当我悬停在每个条形图上时，它就显示了适当的值。
但是，我希望悬停时显示的值在</
浏览 3提问于2021-01-29得票数 2
在下面的img中。当鼠标悬停在图形上时，将显示账单金额和已支付金额。我需要在每个栏中显示默认的账单金额和支付金额，我的意
浏览 8提问于2016-10-26得票数 0
2回答
我在使用chart.js的甜甜圈图时遇到了一些麻烦。问题是当我更新图表时，当我悬停在图表上时，有时它会显示旧的图表。这里是我调用函数来绘制图表的地方：
<select class="form-control" id="ddlCategory" onchange="plotC
浏览 4提问于2017-07-31得票数 2
回答已采纳
我正在使用Asp.net图表和显示条形图。我使用dataPoint.MapAreaAttributes调用一个JS函数(检索ID)，在单击现有图表中的特定条形图时显示下一个图表。但我无法将鼠标指针显示在图表上的特定条形图上。当我使用Datapoint.Url时，它会将鼠标指针更改为将鼠标放在工
浏览 1提问于2010-08-23得票数 0
我需要结合条形图和样条图表使用fusionchart api。你知道如何在fusionchart中组合条形图和样条图吗？
浏览 9提问于2015-04-06得票数 0
我有一个Kendo UI Datavis条形图，我希望在将指针(手)光标悬停在图表中的条形图和这些条形图的标签上时显示其指针(手)光标。当移出图表中的条形图时，光标应返回到标准箭头指针。我注意到，当光标悬停在轴标签(左、右和底部)和图例上时，光标变成了文本光标。因此，除了上述内容之外，我希望光标在</e
浏览 2提问于2013-01-02得票数 2
回答已采纳
1回答
我有一个谷歌图表的问题。我有一个条形图，上面有一些大值和小值。条形图也有一个值标签。如果我将鼠标悬停在工具条上，将会显示工具提示。但是，当我将鼠标悬停在值标签(栏内或栏外)时，不会显示任何工具提示。所以我不可能在非常小的条上显示工具提示。您知道如何告诉Google Charts在悬停</e
浏览 1提问于2018-11-29得票数 1
使用chart.js，我构建了一些条形图。我交换数据以在点击时显示不同的图表。加载页面会显示一切正常。Design Tools</button> <canvas id="myChart"></canvas>
</div>
浏览 31提问于2019-01-25得票数 4
回答已采纳
2回答
我在我的项目中使用列图表。我已经编写了一个自定义函数，它根据图表的y值为每个条形图着色。当我初始化图表时，这很好。当我悬停在图表上时，条形图的颜色会回到默认状态，并且我的自定义颜色永远不会返回。我尝试在悬停时禁用，但这似乎不起作用。即使在酒吧上空盘旋，我<e
浏览 3提问于2014-01-24得票数 5
回答已采纳
我正在绘制一个条形图，其中有一些较大的值和一些较小的值，y轴比例使较小的值不会出现在图表上(较小的值不会显示条形图)，但当您将鼠标悬停在上面时，您可以看到这些值。这使得很难区分值为0的数据点和值非常小的数据点，有没有一种方法可以让小
浏览 1提问于2013-05-23得票数 4
我在这里有一个关于小提琴的图表：下面是我的屏幕上的样子：是否有一种方法可以在加载时使高级图表呈现并正确地呈现？注意:如果要查看数据，可以取消对警报行的注释。
//aler
浏览 2提问于2014-05-15得票数 0
回答已采纳
3回答
在角JS和chart.js中，可以在悬停时显示工具提示，甚至在单击bar时调用函数(假设您使用的是来自chart.js的条形图)。我所指的指令是自定义的，它弹出为包含一些值的<
浏览 3提问于2020-02-10得票数 3
回答已采纳
1回答
我使用D3.js绘制了分组条形图。 Here: https://jsfiddle.net/astropsych/uc3xy0bj/5/ 我需要添加动态交互。这样，当您将鼠标悬停在图例上时，图表上的相应值将突出显示，而当您单击图例时，相应的值将消失，图表将重新生成。请帮帮我
浏览 15提问于2021-01-20得票数 0
1回答
我使用生成以下图表。实际图形现在所取得的成就如下。
1.)如何自定义X轴标签的位置，如图1所示？2.)另外，关于在每个条形图上显示值百分比， post只是在鼠标悬停在条形图上时才起作用。任何解决方案，即使显示工具提示或悬停，数据仍保留在条形图上。现在鼠标在它上面消失了？
浏览 1提问于2018-12-24得票数 2
我正在使用Syncfusion pivot View，在这里我有一个要求，保存多个图表的按钮点击和加载图表的按钮点击。我能够使用getPersistData()和loadPersistData()保存和加载数据。但我也想保存工具栏选择，比如如果用户为图表1选择了条形图，为图表2选择了折线图，那么在再次单击按钮加载</em
浏览 15提问于2021-07-13得票数 0
我有一个堆叠的条形图，当我将鼠标悬停在条形图的底部时，工具提示显示的值为零，如下所示：
..。我只想让工具提示显示在这样的非零条上：图表的JSON如下所示：..。也就是说，"6-10小时“是一个数据集，在没有值的情况下，数据</
浏览 14提问于2021-12-18得票数 0
回答已采纳
我有一个前10的图表，工作(使用假组)，如何所有其他条形图与交叉过滤器工作。如果我选择前10位图表中的一件事，它会过滤所有其他图表，这不是我想要的。我只想让图表显示chart.title文本(悬停文本)，同时禁用它的可点击能力。
到目前为止，我已经研究了dc.js本身，看看是否有一个配置条形图来得到我需要的东西，但我什么
浏览 1提问于2018-04-06得票数 1
回答已采纳
所以我在Reactjs项目中使用echarts(v4.6.0)库创建了一个条形图。它有图例，数据系列分成具有相同颜色和dataZoom滑块的组。每个图例标签对应于图表中的特定条形组(它们具有相同的颜色)。但是，此时如果用户单击图例标签，则与此标签对应的条将消失。我想要实现的是，当用户单击图例标签时，图表需要放大到与其对应的条形组，而不是隐藏它们。有没有办法做到这一点？
浏览 0提问于2020-05-22得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
