chartjs折线图销毁功能没有清除旧的图表实例
chartjs是一款流行的JavaScript图表库，用于创建各种类型的图表，包括折线图。销毁功能是指在不需要使用某个图表实例时，可以将其清除以释放资源和内存。
chartjs折线图销毁功能没有清除旧的图表实例可能是由于以下原因之一：
- 未正确调用销毁方法：在使用chartjs创建折线图后，需要调用相应的销毁方法来清除旧的图表实例。可以使用
destroy方法来销毁图表实例，例如：
myChart.destroy();这将清除名为myChart的图表实例。
- 销毁方法调用位置不正确：确保在不需要使用图表实例时调用销毁方法。例如，在切换页面或隐藏图表时，应该调用销毁方法来清除旧的图表实例。
- 销毁方法未被正确触发：检查代码中是否存在错误或逻辑问题，导致销毁方法未被正确触发。可以使用浏览器的开发者工具来调试代码并查找潜在的问题。
总结： chartjs折线图销毁功能没有清除旧的图表实例可能是由于未正确调用销毁方法、销毁方法调用位置不正确或销毁方法未被正确触发等原因导致的。确保正确调用销毁方法，并在适当的时机触发销毁操作，以清除旧的图表实例。
相关·内容
在我的网站上，我使用chartjs来构建漂亮的折线图(就像这里的文档：https://www.chartjs.org/docs/2.7.2/charts/line.html) 我正在尝试找到一种解决方案，以2色绘制折线图，如果值比之前的值低，则使用颜色#2，这样您就可以非常快地看到与之前的数据相关的值i是否下降。 我正在探索不同的插件，但是没有人能完全按照我的想法去做。我发现最接近的是“财务图表”插件( https://www.abelheinsbroek.nl/financial/ )，但我希望我的图表是普通的折线图，而不是像那个插件那样的蜡烛棒风格。 有没有能做到这一点的插件？
浏览 17提问于2020-10-19得票数 0
目前，我正在使用chartjs生成12个国家的图表数据。
我在折线图上有12个国家的日期。但问题是，当我将鼠标悬停在这些点上时，无法获得国家/地区的详细信息。相反，我得到x和y轴值，它们是y轴上的time和(sum)。当我悬停时如何获取国家/地区的数据。
另外，如果点击了某个点，我应该会在点击时获得该数据。假设我在英格兰悬停并在其上悬停，我应该得到一个仅包含英格兰数据的警告框。
在chartjs中有什么解决方案吗？
浏览 0提问于2015-05-20得票数 0
1回答
ChartJS数据溢出图表区域
、、、、
我有一个用ChartJS创建的图表，它在折线图中显示数据集( (x，y)对)。根据用户请求，我为用户添加了更改X-max和Y-max值的功能。在数据集溢出图表区之前，一切都很好。
这位于图表右侧图例下方的空白处。正如您所看到的，线条不再跟随这些点，直到它们被画布区域裁剪为止。
我希望使用图表区域而不是画布区域来裁剪或遮罩可见数据。在ChartJS中有这样做的设置吗？
编辑:澄清标题
浏览 2提问于2016-11-03得票数 0
22回答
我使用Chartjs显示线条图，这很好：
// get line chart canvas
var targetCanvas = document.getElementById('chartCanvas').getContext('2d');
// draw line chart
var chart = new Chart(targetCanvas).Line(chartData);
但是，当我试图更改图表的数据时，问题就会发生。我通过使用新的数据点创建图表的新实例来更新图表，从而重新初始化画布。
这个很好用。但是，当我在新图表上悬停时，如果我碰巧浏览了与旧图
浏览 19提问于2014-07-18得票数 137
回答已采纳
我有这个json文件：
{"Rid":"00014","StartTime":"28032017","values":[-0.74458,-0.78601,-0.7211,-0.73882,-0.7685,-0.81546,-0.75691,-0.70851]
这里有一些信息和一系列值，我想用折线图表示出来。如何从外部资源加载此json文件？如何用这些值的chartjs折线图创建一个html网页？
对不起，我对java和html没有任何经验。我需要一个简单的例子。
浏览 4提问于2018-10-19得票数 0
我希望能够生成图表，并且当图表的某些部分悬停时(即折线图上的点)，我希望相应的元素在悬停时添加一个类。大概是通过将元素数组传递给悬停的数据点。
这在ChartJS中是可能的吗？如果没有，你能推荐一个有这个功能的海图软件吗？
浏览 3提问于2017-08-07得票数 0
回答已采纳
我已经通过*ngFor循环和它的工作创建了多个动态图表。但是我想在第二次创建它们之前销毁所有的图表。有没有办法做到这一点。我想在创建新的图表之前销毁()图表，但由于每次我都可以实现的图表数量未知。
我的chartjs.component.ts：
import { Component, OnInit, ElementRef } from '@angular/core';
import { Chart } from 'chart.js';
import { pieceLabel } from 'chart.piecelabel.js';
impo
浏览 2提问于2018-09-14得票数 1
1回答
我正在处理一个日历，它每天都有一个图表，根据各个单元格中的事件数据，应该以不同的方式呈现分段。
这是我的图表创作的样子。这是在满日历的dayRender事件中发生的，所以它每天都运行这个精确的代码
var theCanvas = $('canvas#'+idDate);
var initialSegements = getTotalNumberOfSegments();
var pieData = [];
for(var i=0; i < initialSegements;
浏览 1提问于2015-08-19得票数 0
回答已采纳
1回答
我正在使用ChartJS构建折线图。我想增加Y轴上垂直刻度线之间的间距。下面是传递给ChartJS的相关选项的一部分。ticks部分中是否有一个属性允许我增加刻度之间的间距，从而增加图表画布的总高度？
lineChartOptions = {
scales: {
yAxes: [
{
id: 'y-axis-0',
position: 'left',
ticks: {
... // <-- WHAT OPTION GOES HE
浏览 0提问于2019-08-09得票数 1
我使用chartJS开发了一个折线图。在我的图表中，我必须绘制数据线和带有气泡的线，以显示数据中模式、红色和琥珀色的位置。我已经想好怎么画线了。但我不明白如何绘制气泡来显示细节。
我需要画的图表如图所示：
你知道怎么画这个图表吗？
浏览 0提问于2018-07-11得票数 0
1回答
chartjs v3.7.1
vue-chartjs v4.0.4
在vue-chartjs的第3版中，我可以使用this.$data._chart引用图表对象，因为该组件是从图表组件扩展的。
但是在第4版中，它只是直接使用图表组件，如何获得图表对象的引用？我尝试了:ref指令，但它只返回dom元素，而不是图表对象。
我找不到4.0.4版本的例子
浏览 12提问于2022-04-05得票数 1
我想创建一个类似于下面的图表它ChartJS。这是两个折线图，但填充了两条线之间的空格。
X轴是每个样本的时间，Y轴是当时记录的最低和最高温度。
最小/最大值之间的区域是唯一需要填充的位，最小/最大值线外的区域应保持不填充。
使用ChartJS可以做到这一点吗？
谢谢Shawty
浏览 1提问于2016-07-26得票数 0
我正在尝试使用react-chartjs-2创建折线图。我从一个应用程序接口中获取数据，并在componentWillMount阶段将其呈现给每个图表。我知道我得到了正确的数据，因为我最初使用Sparkline组件创建了图表，并且图表非常完美。我决定使用Chartjs，因为它具有自定义图表的能力。问题是每个图表上只显示前两个数据点。有人能告诉我我哪里做错了吗？我是否忘记了图表选项中的某些内容？我是一个相对较新的反应，所以我只是对使用外部组件的感觉。谢谢!
import {Bar, Line, Pie} from 'react-chartjs-2';
export defa
浏览 3提问于2018-09-16得票数 0
2回答
销毁饼图中的方法实现
、、、
我有使用chartJS创建饼图的代码。图表数据根据用户输入的日期选择器显示。这是第一次完美地工作。第二次选择新的日期范围时，图表如期显示。但当我点击新的图表时，它又回到了旧的图表。
下面是我的示例代码：
var ctx = document.getElementById("chart-area").getContext("2d");
var myPie = new Chart(ctx, config);
我从文档中发现它需要在重新绘制之前销毁。但是我怎么才能在这里做到呢？
有人能帮帮我吗？
浏览 0提问于2018-01-07得票数 0
我想找出chartjs的销毁方法，但效果不太好。我用一个虚拟按钮在虚拟数据上做这件事，但这是我有的。
用于测试的非常简单的html标记：
<div class="container mt-5">
<div class="row">
<canvas id="myChart"></canvas>
</div>
<div class="row mt-5">
<butto
浏览 0提问于2018-03-09得票数 0
回答已采纳
我正在尝试复制显示为的NSE证券交易所比较图。
我正在使用Chartjs 2.0。我在图表中有两个折线图。
将鼠标悬停在数据点上时，我希望在画布外的div中显示工具提示的ylabel (就像上面图表右上角显示的变化值一样)
我发现GRUNT的代码对很有帮助
浏览 5提问于2019-08-05得票数 0
回答已采纳
1回答
我想知道如何在chartjs中以html表格的形式查看图表数据。我已经使用chartjs实现了折线图，x轴表示颜色yaxis表示投票和分数
Working fiddle:我想以表格的形式显示图表
Color | # of Votes | # of Points
Red 12 7
Blue 19 11
... and so on
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow
浏览 1提问于2020-01-11得票数 2
我使用ChartJS (v2.1)创建折线图。我没有固定大小的数据集，我希望折线图根据数据集的大小调整其宽度：
大数据集：
较小的数据集：
我希望大型数据集使图表更宽(而不是缩小到可用宽度)。显示水平滚动条是一种选择，但我不能指定图表的宽度，因为我不知道数据集有多大。
是否有设置X轴刻度之间的最小宽度的选项？或者自动增加图表？我尝试在中实现该解决方案，但我无法在设计时确定宽度。
我的标记：
<div class="chartWrapper">
<canvas id="f1-chart" class="chart cha
浏览 2提问于2016-07-13得票数 4
我正在使用chart js (https://www.chartjs.org/)，我有一个折线图，我想将条形图作为第二个数据集添加到其中。问题是折线图显示了，但条形图没有显示，但显示了条形图数据集的最大值。我的意思是，折线图的最大值是1，条形图的最大值是2，图表显示的值是2。 如果删除折线图数据集，则会成功绘制条形图，但将它们放在一起时，只会显示折线图。它会将标签添加到图例中，尽管它只是不显示该条。 下面是我的图表对象 activeUserChart = new Chart(ctx, {
type: 'line',
浏览 24提问于2019-05-04得票数 0
回答已采纳
我已经创建了一个折线图，悬停在这些点上时无法看到工具提示。它似乎抛出错误，而悬停在线点上。TypeError: Cannot read property 'format' of undefined
到目前为止，我能够使用需要的time数据呈现折线图。根据文档，尝试更改单位，并希望看到轴标签，但这也是不可见的。下面是图表配置和
var data = [{
"t": 1622287843965,
"y": "35181.38"
},
{
"t": 1622288064247,
浏览 7提问于2021-05-30得票数 0
回答已采纳
我在chart.js中遇到了这个问题，我有一个关于特定报告的图表。当我将页面切换到包含chartjs元素的另一个页面并切换回来时，图表在图表数据点上显示数据标签为"x: number，y: number“。读了一点之后，我相信这是因为当我切换回原来的图表时，画布没有被正确地重置。我找到的使用clear()或destroy()命令的修复示例引用了图表画布。示例：，但是在react中，这就有点棘手了。我的问题是，如何在绘制图形之前清除画布。下面是用于绘制图形的图表组件。
cont Chart: FunctionComponent<Props> = ({data}) =>
浏览 0提问于2020-09-30得票数 0
我想创建一个带有实际值(折线图)和投影值(点图)的预测图表。Here是一个用Excel制作的例子： ? 我想使用ECharts库创建相同的图表，但我在他们的网页https://echarts.apache.org/examples/en/中找不到任何可以使用的示例： 如果有一种方法可以使用javascript构建这个图表，这将是非常有帮助的，如果有这种可能性，我不介意使用其他库，比如ChartJs。
浏览 112提问于2019-07-02得票数 3
回答已采纳
我正在使用chartjs在我的应用程序上绘制折线图。我在x-axis上有日期，但作为分类标准。意味着标签是字符串，但却是dates。在y轴上，我有数值。我正在更改一些功能的图表，更改后，我想突出显示图表的某些区域。有什么方法可以在折线图上突出显示一个区域吗？我找过了，但什么也没找到。
我想实事求是地做这件事，就像我想突出显示一些特定的日期，所以我想要有这种类型的效果。
任何形式的帮助都将不胜感激。我是图表和javascript方面的新手。
附注:这是专门针对line chart而不是针对doughnut的
浏览 7提问于2017-12-14得票数 1
回答已采纳
我有一个页面，其中包含使用chartjs绘制的多个图表。问题是，当我在div中绘制图表时，当它被v-if或v-show隐藏时，当条件改变时，图表不会出现，而隐藏的div出现了。有没有办法做到这一点。我尝试过使用update，但这不起作用。只有在相关div未隐藏时创建的图表才会出现。
浏览 2提问于2019-01-23得票数 2
我是ChartJS上的新手。
我正在使用折线图。我的标签包含值: 100,200,1000
标签之间的距离是相同的，并且不依赖于标签的值。我的图表要求200个标签和1000个标签之间的距离比100到200个标签之间的距离长8倍。
请帮我解决这个卡住的问题。
浏览 2提问于2015-10-15得票数 4
这里的问题是我只需要有一个包含多个系列的图表(例如折线图)。数据来自不同的WebServices，那么如何能够加载到一个图表的存储中，而不仅仅是一个加载器呢？
谢谢。
浏览 1提问于2013-03-20得票数 0
我正在尝试让我的数据点在折线图上始终显示一个值。如下所示： ? 我找到了一个可以在ChartJS上运行的solution，但是不知道如何在React中使用ChartJS (最好使用函数组件)。 到目前为止，我已经得到了一个简单的图表，如下所示： import React from 'react'
import { Line } from 'react-chartjs-2'
const dataForGraph = () => {
return {
labels: ["January", "Febr
浏览 62提问于2021-02-11得票数 1
回答已采纳
我想建立一个应用程序，需要以图表的形式显示统计数据。因为我找不到合适的库/方式/api来绘制饼图、条形图、折线图等图表。在web应用程序中，我们可以使用JS库，它可以根据我的需要绘制图表。
下面是一个使用chartJS库的示例。
这就是Web应用程序中的开发工具。
我可以使用这个JS库在Native App中开发同样的库吗？我认为这不可能直接实现。如果有什么办法，请告诉我。或者有没有什么库可以用来在Native App中开发同样的需求。
浏览 4提问于2015-07-23得票数 3
1回答
我想创建一个基于data coming from MySQL的dynamic line chart。我正在寻找这样的例子，如果在MySQL中有新的数据，折线图将被更新，而不需要重新加载网页。有人能为我描述的问题提供一个例子来帮助我吗？对于非绑定图表类型，可以是highcharts、chartjs等。谢谢你的帮助。
浏览 14提问于2018-09-08得票数 0
我使用的是chart.js v2.5.0。
我想动态地创建图表，而不使用全局变量。
例如，我希望使用类似于以下代码的代码：
function UpdateChart(ctrl) {
var config = $("#" + ctrl).data("ChartJs");
config.data.datasets.forEach(function (dataset) {
dataset.data = dataset.data.map(function () {
浏览 5提问于2017-05-09得票数 0
回答已采纳
1回答
我有一张ChartJS的折线图，上面有欧元的值。我希望能够更改$中的数据。 欧元图表运行良好，但我无法更改数据。 我的图表： <canvas id="myChart" width="820" height="650"></canvas>
let ctx = document.getElementById("myChart");
Chart.defaults.global.defaultFontSize = 15;
var dataEu = [{{{ cote_1989_eu_ba
浏览 31提问于2019-10-18得票数 0
我正在尝试使用Google charts来创建折线图，这些折线图在x轴上具有日期时间，在另一轴上具有值。通常这些时间段只有48小时，所以我真的需要在x轴上显示一天中的时间以及日期。
有谁知道如何做到这一点吗？
或者，有没有人可以推荐另一个Javascript图表api来实现这一点呢？
浏览 0提问于2012-07-31得票数 2
1回答
您好，我正在创建一个Django应用程序，其中我使用Chart.js制作条形图。我有一个创建随机图表的按钮，但当我将鼠标悬停在新生成的图表上时，旧的图表仍然在它后面。我怀疑这与保存图表的HTML画布有关，但我不确定。我只想要一个图表，即单击按钮后创建的图表。在JS中使用this绘制之前，我已经尝试过清除画布的rect。 var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.wi
浏览 31提问于2020-08-31得票数 0
6回答
我正在开发一个使用chart.js (www.chartjs.org)的网站。
我必须制作一个折线图来显示多个数据序列，用户可以通过单击相应的图例符号(类似于此)来隐藏或显示这些数据。
有没有办法用chartjs做到这一点？
浏览 2提问于2015-01-22得票数 8
我已经使用Google Charts API在我的网页上绘制了几个图表。如果我想清除它们，可以使用图表的clearChart()方法。但是假设我有一个带有id="mydiv“的div，其中绘制了一个折线图。要清除它，我必须首先获取图表对象，然后调用clearChart()。但是如何获取图表对象呢？
浏览 0提问于2012-07-03得票数 0
回答已采纳
我正在使用来自的。如何清除之前绘制的图表？
我正在使用from (折线图(双YAxis))
浏览 23提问于2017-04-27得票数 5
我正在使用chartJs为我正在使用的应用程序生成图表。
我可以使用type : line来生成折线图
new Chart(document.getElementById("total-chart"), {
type: 'line',
data: {
labels: [ {!! $dates_string !!} ],
datasets: [
{
浏览 0提问于2018-03-14得票数 1
3回答
我正在尝试获得我的折线图的x轴上的最后七天(使用chartjs)。做这件事最好的方法是什么？ 谢谢
浏览 35提问于2019-10-07得票数 2
回答已采纳
1回答
我是一个angular8应用程序的初学者，使用chart.js版本^2.9.3，我基于以下数据创建了一个图表。使用我拥有的数据创建折线图的代码示例：
const labels = [65, 65, 80, 80, 56, 55, 40]
const data = {
labels: labels,
datasets: [{
label: 'My First Dataset',
data: [67, 67, 81, 81, 56, 55, 40],
fill: false,
b
浏览 7提问于2021-07-14得票数 0
1回答
我使用的是来自不同插件的webpack和react以及图表。等)。我想要动态导入独立图表(条形图、极轴图、折线图等)。使用React.lazy()，并在一个仪表板中显示大约20个数据(有时重复显示不同的数据)。
我考虑了动态导入，因为我希望有越来越多的图表组件，并希望将这些组件排除在主包之外。此外，我觉得我不能将它们放在一个包中并加载一次，因为它们中的一些使用了不同的依赖关系，并且并不是所有的都显示在仪表板上。
所以我的主要问题是，有没有办法捆绑一些图表组件的依赖项(即chartjs)，并在必要时只加载该依赖项一次？或者，有没有更聪明的方法来解决这个性能问题？
浏览 7提问于2021-03-10得票数 0
回答已采纳
1回答
我有一个预先填充了服务器列表的下拉列表。当我选择一个并提交表单时，我可以从mysql数据库中检索cpu负载avg的最后12个值的数组。
使用这些数据，我想更新下面的简单折线图：
<div>
<canvas id="cpuload" width="500" height="300"></canvas>
</div>
<script>
$(function() {
var cpudata = {
labels: ["t
浏览 3提问于2016-04-13得票数 0
我用chartjs做了一个折线图。现在我想要的是，每当有人在点上悬停时，点的大小和颜色都会改变。我尝试了一些选项，但没有成功。有人能帮我一下吗？
javascript：
var ctx = $('#chart');
var myLineChart = new Chart(ctx, {
type: 'line',
data: {
labels: [1, 2, 3, 4, 5],
datasets: [{
label: '# of votes',
data: [1, 2, 3, 4, 5],
fill:
浏览 0提问于2017-05-25得票数 7
回答已采纳
1回答
我知道这个问题有几种形式，但没有人提供任何解决方案。因此，我面临的问题是react-chartjs-2折线图没有随着组件状态进行更新。这是代码 import React, { Component } from 'react';
import { Line, Chart } from "react-chartjs-2"
import { ipcRenderer } from "electron"
class Network extends Component {
state = {
data : {
浏览 12提问于2019-04-09得票数 0
在angular 2项目中使用charts.js，chartjs-plugin- annotation和ng2-charts，我需要用一个方框注释一个折线图，如下图所示。
一切似乎都很好，除了图表上没有出现的框注释(红色)。与注释相关的代码放在图表选项中
annotation: {
drawTime: 'beforeDatasetsDraw',
annotations: [
{
type: 'box',
id: 'y-axis-box',
//mode: &
浏览 1提问于2018-12-23得票数 4
我使用的是react-chartjs-2。我有一个折线图和x: time y: value。我有两个不同的数据集。第一个数据集值非常低，低至0.00000145等等。第二个数据集值高达数百万。当我在同一张图表中使用它时，第一个数据集在底部，看起来像一条直线，作为比较两个数据集的图表。两个数据集的时间是相同的。那么，查看两个不同数据集自我比较的最佳方式是什么？
浏览 6提问于2018-02-03得票数 0
对于ngx- chart折线图，它显示的是折线图，但数据点没有点。
如果将鼠标悬停在数据点上，它会显示一个圆点表示数据小数点，还会显示一个标签工具提示。
我喜欢用折线图来显示所有的数据点，就像这样。
我需要你的帮助如何显示一个点在数据点在ngx图表折线图
以下是ngx- 的示例
这是ngx-chart库的源代码。
谢谢。
浏览 0提问于2019-05-09得票数 5
我正在使用chartjs 2.x创建一些条形图
查找固定条形宽度选项以及chartjs 2.x，现在它根据条形计数进行调整。我找到了一个像"barPercentage“这样的选项，但它不适合我，因为它是每个图表上的工作百分比。我发现了一个关于chartjs 1.x的类似问题，但它的chartjs 2.x
浏览 0提问于2016-06-30得票数 1
我正在尝试使用vue-chartjs创建一个简单的折线图，但是我似乎无法去掉每个数据点上方的文本。我似乎找不到解决这个问题的方法，也找不到其他有过这个问题的人。为了下面的演示，我对情况进行了简化： 我通过props传递的图表数据定义为 let chartData = {
labels: ['a', 'b', 'c'],
datasets: [
{
data: [{ x: 'a', y: 1 }, { x: 'b', y: 2 }, { x
浏览 9提问于2020-01-18得票数 2
回答已采纳
我用react chartjs做了一个折线图。图表工作得很好，但是当我尝试更新图表时，它没有更新。虽然我可以更改图表的数据。请帮帮忙。我尝试在单击图例时更新图表。我看了一些教程，发现like更新功能会对我有帮助。但是，当我在我的代码行中尝试更新函数时，它显示了一个错误：“未定义的更新函数”。 import React from 'react';
import {Line} from 'react-chartjs-2';
const checkinsData={
labels:['4 P.M','5 P.M',
浏览 58提问于2020-04-01得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
