当前位置: 首页 > 知识库问答 >
问题:

chart.js工具提示会在更新后不断记住旧数据

沈永贞
2023-03-14

我显示一个带有chart.js的图表,当用户悬停在上面时,会显示一个工具提示。这工作罚款。

但是,我想添加用户可以取消检查数据点的选项。我做到了,这是正确的,但是工具提示功能记住了新的和旧的数据。所以如果你在图表上悬停,它会在新旧之间闪烁。

当我制作自定义工具提示并放置数据项目的console.log时,我可以看到它只是加载了几个数据对象。

有没有办法确保旧数据被真正遗忘?

看到小提琴了吗https://jsfiddle.net/CorneelDragon/s0udzwv3/27/ 或者参见下面的代码(它在开始时起作用,但当您取消选中时,工具提示会使其不稳定):

<script 
src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js'></script>`
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>`
<div id="slct2">"beh"</div>
<table id="table1"  border=1></table>
<!-- bar chart canvas element -->
<canvas id="myChart" width="200" height="50"></canvas>
<script type="text/javascript">
</script>

还有javascript:

test_labels = ["meh", "beh", "yeh"]
score = [4,3.8,5]
var s2 = document.getElementById("slct2");
s2.innerHTML = "";
for (var test in test_labels) {
    if (test_labels.hasOwnProperty(test)) {
        var pair = test_labels[test] + score[test];
        var checkbox = document.createElement("input");
        checkbox.type = "checkbox";
        checkbox.name = "test_filter";
        checkbox.value = pair;
        checkbox.checked = true;
        s2.appendChild(checkbox);
        var label = document.createElement('label');
        label.htmlFor = pair;
        label.appendChild(document.createTextNode(pair));
        s2.appendChild(label);
        s2.appendChild(document.createElement("br"));    
    }
}

function fillCanvas (test_labels, score) {
  var ctx = document.getElementById("myChart").getContext('2d');
  ctx.innerHTML = "";

  var myChart = new Chart(ctx, {
      type: 'bar',
      data: {
          labels : ["test_month"]
      },
  });

  setTimeout(function () {

     for (test in test_labels){
        myChart.data.datasets.push({
          backgroundColor: 'rgb(228,26,28)',
          label: test_labels[test],
          data: [score[test]]
        });
      }

    myChart.update();

  }, 1000);

}
fillCanvas(test_labels, score);

var filter_magic = function(e) {

        test_selected = []
        var table1 = document.getElementById("table1");
        table1.innerHTML = "";
        jQuery('input[type="checkbox"][name="test_filter"]').each(function() {
            if (jQuery(this).is(':checked')) {
              var tr = document.createElement('tr');
              tr.innerHTML = this.value;
              table1.appendChild(tr);
              test_selected.push(this.value);
            }
          })
        fillCanvas(test_selected, score);
        }     
jQuery('input[type="checkbox"][name="test_filter"]').on('change', filter_magic);
filter_magic();  

共有1个答案

岳朝
2023-03-14

这不是更新图表的正确方法,在您的代码中,每次更新图表时,您都在创建图表的新实例,而不会破坏前一个实例,这就是为什么您可以在悬停时看到旧值。

一个解决方案是,如果你想每次都创建一个新的图表,然后把你的图表存储在一个全局变量中,每当复选框被切换,然后检查图表是否存储在变量中,销毁它,然后创建一个新的。

请参阅下面的代码或fiddle-

test_labels = ["meh", "beh", "yeh"]
score = [4,3.8,5]
var s2 = document.getElementById("slct2");
s2.innerHTML = "";
for (var test in test_labels) {
    if (test_labels.hasOwnProperty(test)) {
        var pair = test_labels[test] + score[test];
        var checkbox = document.createElement("input");
        checkbox.type = "checkbox";
        checkbox.name = "test_filter";
        checkbox.value = pair;
        checkbox.checked = true;
        s2.appendChild(checkbox);
        var label = document.createElement('label');
        label.htmlFor = pair;
        label.appendChild(document.createTextNode(pair));
        s2.appendChild(label);
        s2.appendChild(document.createElement("br"));    
    }
}
var myChart;

function fillCanvas (test_labels, score) {  
  var ctx = document.getElementById("myChart").getContext('2d');
  ctx.innerHTML = "";

  if(myChart)
  {
    myChart.destroy();
  }

  myChart = new Chart(ctx, {
      type: 'bar',
      data: {
          labels : ["test_month"]
      },
  });

  setTimeout(function () {
     for (test in test_labels){
        myChart.data.datasets.push({
          backgroundColor: 'rgb(228,26,28)',
          label: test_labels[test],
          data: [score[test]]
        });
      }

    myChart.update();

  }, 1000);
}

fillCanvas(test_labels, score);

var filter_magic = function(e) {

        test_selected = []
        var table1 = document.getElementById("table1");
        table1.innerHTML = "";
        jQuery('input[type="checkbox"][name="test_filter"]').each(function() {
            if (jQuery(this).is(':checked')) {
              var tr = document.createElement('tr');
              tr.innerHTML = this.value;
              table1.appendChild(tr);
              test_selected.push(this.value);
            }
          })
        fillCanvas(test_selected, score);
        }     
jQuery('input[type="checkbox"][name="test_filter"]').on('change', filter_magic);
filter_magic();  

另一种推荐的方法是使用new chart只加载一次图表,每次复选框切换时只需推送新数据集并调用存储在全局变量中的chart.update()方法。

 类似资料:
  • 我正在使用chart.js在html页面中创建多个图表,并且在Windows加载之后,图表将以每秒的速度动态更新,并使用新的数据值。我正在使用chart.js update()函数处理更新。所有创建的图表都存储在全局数组中,然后获取这些图表进行更新。 当我第一次打开html页面时,每秒都会更新图形(显示实时测量数据),但当我移动到webapp中的另一个子页面,然后返回到图形应该所在的页面时,所有画

  • 我使用Chart.js库绘制条形图,我想显示工具提示不仅在条形图悬停,而且在x轴标签悬停该条形图。我找到了用于配置的方法,但它只允许我访问当前悬停栏的数组,这是没有用的。 那个么,我怎样才能访问鼠标事件,并从那个里获取位置,将其与条形标签的位置进行比较呢?还是有别的办法? 我当前的配置: 它只打印出悬停条数据,但我坚持要想出如何扩展它以满足我需要的行为。

  • 问题内容: 我正在尝试获得一个工具提示,以显示任务的当前进度。所以,我想的是,工具提示文本的变化 而 显示工具提示。但是,当我调用时,显示的文本将保持不变,直到我从工具提示组件退出鼠标并再次输入。之前打电话不会改变任何事情。 问题答案: 实际上,即使在两次调用之间将工具提示重置为null时,它也不会自我更新。 到目前为止,我发现的唯一技巧是模拟鼠标移动事件并将其转发到TooltipManager上

  • 我使用的是Chart.js2.6,我已经实现了horizontalLine插件,在条形图上显示平均值。它可以正常工作,但是当工具提示显示在与直线相交的位置时,它部分被水平线本身覆盖。我试图找出如何使工具提示在水平线上方绘制。 我知道工具提示是canvas元素的一部分,因此没有z-index属性。我怎样才能做到这一点? 下面是我使用的水平线插件。 ... 然后我使用以下命令将其添加到条形图选项中 它

  • 我在使用mousemove事件显示工具提示时遇到了一些麻烦。基本上,当我的鼠标指针在图片框的某些区域上时,我想显示一个工具提示。我试图使用mousemove事件来完成此操作,确定阉羊指针位于最佳位置,并(如果是这样)使用settools tip设置工具提示。 这是我的mousemove事件(我注意到,当显示工具提示时,mousemove会持续触发,我会检查位置是否真的发生了变化) 这工作正常,除了