问题：

Chartjs条形图，悬停时显示旧数据

拓拔奇

2023-03-14

我有一个使用chart.js创建的条形图。页面加载时一切正常，但当我使用daterangepicker更改时间范围时，出现了一个小故障。新数据被引入，但当我将鼠标悬停在上面时，旧数据会显示出来。我是javascript新手，希望能得到一些帮助。看起来我需要合并。销毁（）；不知怎么的，但我不知道怎么做。下面是我的代码片段：

function loadFTPRChart(startdate, enddate){
var BCData = {
labels: [],
datasets: [
 {
  label: "Pass %",
  backgroundColor: "#536A7F",
  data: [],
  stack: 1
},
{
  label: "Fail %",
  backgroundColor: "#e6e6e6",
  data: [],
  stack: 1
},
{
  label: "Auto %",
  backgroundColor: "#286090",
  data: [],
  stack: 2
},
{
  label: "Manual %",
  backgroundColor: "#f0f0f0",
  data: [],
  stack: 2
}
 ]
};
  $.getJSON( "content/FTPR_AM_Graph_ajax.php", {
    startdate: startdate,
    enddate: enddate,
    location: "M"
})
.done(function( data ) {
    console.log("data", data);
    $.each( data.aaData, function( key, val ) {
      if(val == ""){return true}
      BCData.labels.push("Coater " + val[0]);
      BCData.datasets[0].data.push(parseFloat(val[2]));
      BCData.datasets[1].data.push(parseFloat(100-val[2]));
      BCData.datasets[2].data.push(parseFloat(val[1]));
      BCData.datasets[3].data.push(parseFloat(100-val[1]));
    });

    var option = {   
     responsive:true,
};
console.log("BCData", BCData);


//console.log("PrevData", data);
var ctx = document.getElementById("mybarChart2").getContext("2d");
new Chart(ctx, {
  type: 'groupableBar',
  data: BCData,
  options: {
    scales: {
      yAxes: [{
        ticks: {
          max: 100,
        },
        stacked: true,
      }]
    }
  }
});
});

}


loadFTPRChart($('#reportrange').data().daterangepicker.startDate.format('MM/DD/YYYY'), $('#reportrange').data().daterangepicker.endDate.format('MM/DD/YYYY'));

破坏原始数据的最佳方法是什么，以便当我更改日期范围并将鼠标悬停在新图表上时，旧数据不再闪烁？

谢谢

共有3个答案

孟洋

2023-03-14

它会帮助你...

检查MyChart是否已配置，如果存在，请使用destroy（）清除它；方法，并将新配置绑定到画布。

示例代码。。

if (window.MyChart != undefined)
{
    window.MyChart.destroy();
}
window.MyChart = new Chart(ctx, MyChartconfig);

邵宏达

2023-03-14

这是我发现的chartjs把戏

var ctxLine = document.getElementById("line-chart").getContext("2d");
if(window.bar != undefined) 
window.bar.destroy(); 
window.bar = new Chart(ctxLine, {});

https://therichpost.com/solved-hovering-chartjs-bar-chart-showing-old-data

邓阳炎

2023-03-14

使用您正在采取的方法（例如，每次日期范围更改时创建一个新的图表对象），则必须首先销毁以前的图表，然后创建新的图表。

您可以使用.destroy（）原型方法来执行此操作。这正是API声明的内容。

使用此选项可以销毁创建的任何图表实例。这将清除存储在chart.js中的对chart对象的任何引用，以及chart.js附加的任何关联事件侦听器。必须在画布重新用于新图表之前调用此函数。

因此，您的代码看起来会像这样（请注意，我们销毁并重新创建）。

// define a variable to store the chart instance (this must be outside of your function)
var myChart;

function loadFTPRChart(startdate, enddate) {
  var BCData = {
    labels: [],
    datasets: [{
      label: "Pass %",
      backgroundColor: "#536A7F",
      data: [],
      stack: 1
    }, {
      label: "Fail %",
      backgroundColor: "#e6e6e6",
      data: [],
      stack: 1
    }, {
      label: "Auto %",
      backgroundColor: "#286090",
      data: [],
      stack: 2
    }, {
      label: "Manual %",
      backgroundColor: "#f0f0f0",
      data: [],
      stack: 2
    }]
  };

  $.getJSON("content/FTPR_AM_Graph_ajax.php", {
      startdate: startdate,
      enddate: enddate,
      location: "M"
    })
    .done(function(data) {
      console.log("data", data);
      $.each(data.aaData, function(key, val) {
        if (val == "") {
          return true
        }
        BCData.labels.push("Coater " + val[0]);
        BCData.datasets[0].data.push(parseFloat(val[2]));
        BCData.datasets[1].data.push(parseFloat(100 - val[2]));
        BCData.datasets[2].data.push(parseFloat(val[1]));
        BCData.datasets[3].data.push(parseFloat(100 - val[1]));
      });

      var option = {
        responsive: true,
      };
      console.log("BCData", BCData);

      // if the chart is not undefined (e.g. it has been created)
      // then destory the old one so we can create a new one later
      if (myChart) {
        myChart.destroy();
      }

      var ctx = document.getElementById("mybarChart2").getContext("2d");
      myChart = new Chart(ctx, {
        type: 'groupableBar',
        data: BCData,
        options: {
          scales: {
            yAxes: [{
              ticks: {
                max: 100,
              },
              stacked: true,
            }]
          }
        }
      });
    });
}

尽管如此，一遍又一遍地销毁/创建是非常昂贵的，事实上甚至没有必要这样做。还有另一个名为.update（）的原型方法，如果更改了图表的基础数据或标签对象，则可以使用该方法重新渲染图表。

下面是一个jsfiddle，展示了一个更改底层数据和标签，然后重新渲染图表的示例。我强烈建议你采取这种方法。

下面是采用这种更好的方法时代码的外观。

// define a variable to store the chart instance (this must be outside of your function)
var myChart;

function loadFTPRChart(startdate, enddate) {
  var BCData = {
    labels: [],
    datasets: [{
      label: "Pass %",
      backgroundColor: "#536A7F",
      data: [],
      stack: 1
    }, {
      label: "Fail %",
      backgroundColor: "#e6e6e6",
      data: [],
      stack: 1
    }, {
      label: "Auto %",
      backgroundColor: "#286090",
      data: [],
      stack: 2
    }, {
      label: "Manual %",
      backgroundColor: "#f0f0f0",
      data: [],
      stack: 2
    }]
  };

  $.getJSON("content/FTPR_AM_Graph_ajax.php", {
      startdate: startdate,
      enddate: enddate,
      location: "M"
    })
    .done(function(data) {
      console.log("data", data);
      $.each(data.aaData, function(key, val) {
        if (val == "") {
          return true
        }
        BCData.labels.push("Coater " + val[0]);
        BCData.datasets[0].data.push(parseFloat(val[2]));
        BCData.datasets[1].data.push(parseFloat(100 - val[2]));
        BCData.datasets[2].data.push(parseFloat(val[1]));
        BCData.datasets[3].data.push(parseFloat(100 - val[1]));
      });

      var option = {
        responsive: true,
      };
      console.log("BCData", BCData);

      // if the chart is not undefined (e.g. it has been created)
      // then just update the underlying labels and data for each
      // dataset and re-render the chart
      if (myChart) {
        myChart.data.labels = BCData.labels;
        myChart.data.datasets[0].data = BCData.datasets[0].data;
        myChart.data.datasets[1].data = BCData.datasets[1].data;
        myChart.data.datasets[2].data = BCData.datasets[2].data;
        myChart.data.datasets[3].data = BCData.datasets[3].data;
        myChart.update();
      } else {
        // otherwise, this is the first time we are loading so create the chart
        var ctx = document.getElementById("mybarChart2").getContext("2d");
        myChart = new Chart(ctx, {
          type: 'groupableBar',
          data: BCData,
          options: {
            scales: {
              yAxes: [{
                ticks: {
                  max: 100,
                },
                stacked: true,
              }]
            }
          }
        });
      }
    });
}

类似资料：

Chartjs条形图在使用ajax时悬停时显示旧数据

我是javascript新手我有一个使用chart.js创建的条形图。页面加载时一切正常，但当我更改值时，会出现小故障。新数据被引入，但当我将鼠标悬停在上面时，旧数据会显示出来。当我更改日期范围并将鼠标悬停在新图表上时，销毁原始数据的最佳方法是什么？非常感谢。
图表js显示鼠标悬停时的旧数据

当我在图表上移动鼠标时，如何修复图表js错误，使其显示旧数据。我的Js文件我可以在图表js中显示JSON响应中的数据，但当我在图表上移动鼠标时，它的问题显示了以前的值。我曾试图破坏这种方法，但并没有奏效。如何预防这个问题？？。
ChartJs鼠标悬停bug（显示以前的图表）

我认为我的问题是一个已知的问题，每次我制作一个新的图表，并将鼠标悬停在画布上的一些点上，旧的图表总是会闪进闪出。这是我试图修复它的一个线程，但似乎没有任何效果。我试图重新添加画布，使用破坏，清除，如果语句应该清除它，但什么都没有。这是我的代码：我尝试添加
Chart.js条形图：在标签悬停上显示工具提示

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

我试图创建一个堆叠条形图与chartjs。我有时间差异的时间序列，这意味着一些序列可以在一段时间内有价值，但其他序列没有价值。出于这个原因，我选择直接将x值包含在数据集中，而不是作为标签数组，但是图表不能正确渲染。这是我的代码：我认为问题在于x轴堆叠。这里有一个JSFiddle来说明这个问题。 https://jsfiddle.net/1kLyyjfp/
Python Matplotlib在图形上悬停时显示光标

我想绘制INS的收盘价如下，它的工作原理。然后我想在图形上悬停时添加光标。我跟随https://matplotlib.org/3.1.0/gallery/misc/cursor_demo_sgskip.html的演示，这就是我想要的。但当我将这些行添加到代码中时，它显示值错误。最初我使用历元时间作为x轴，我认为这就是问题所在，所以我将历元时间转换为日期时间，但它仍然不起作用，并且什么也没有绘制。

Chartjs条形图，悬停时显示旧数据

共有3个答案

相关问答

相关文章

相关阅读

相关工具

相关文档