Question

我使用ChartJs在页面上创建了一个图表，然后放置了三个按钮，以便在单击时可以用不同的图表类型表示数据。但是我遇到的问题是，如果我在切换到其他图形后在画布上移动鼠标指针，它会不断切换或闪烁，这不好，我如何让它保持在当前图表类型上。

我尝试在渲染图表之前清除画布和上下文对象，但是它仍然无法正常工作，这是我的代码。

var chartx;
var cv;


var mnts, vals, mx, steps; // for the chart labels..

//从此URL中检索json数据。 var setting = { 类型：“ GET”，网址：“ / ajax / stats / summary” };

$(function(){
  'use strict';  

  cv = document.getElementById('dboard');  //the canvas object
  pullChartData('line');                  //draw the line graph first

});

function pullChartData(chtype){

   shwChldx();     //show the GIF loader 
   clearCanvas();  //clear the canvas

   $.ajax(setting)
    .done(function(response){       
       o = JSON.parse(response);

       mnts = String(o.days).split(';');   //array of horizontal labels
       vals = String(o.values).split(';'); //array of values
       mx = Number(o.mx);                  //maximum value among chart data
       steps = Number(o.step);             //get the step to use on chart

       setChartType(chtype);
       hideChldx()

    }).fail(function(xhr,status,error){

       hideChldx();
       notifyCVS('error loading CHART data...');

    });
}


function shwChldx(){   //show loader GIF 
  $('#tkldr').css('display', 'block');
}


function hideChldx(){     //hide loader GIF
  $('#tkldr').css('display', 'none');
}


function drawChart(cdiv, ctype){  //draw graph function

    chartx = new Chart(cdiv, {
                    type: ctype,
                    data: {
                      labels: mnts,     
                      datasets: [{
                        data: vals,
                        label: ' - visits at on this day',
                        borderColor: '#324463',
                        fillColor: 'rgba(109,177,117,0.71)',
                        borderWidth: 1,
                        fill: true
                      }]
                    },

                    options: {

                          backgroundColor: '#FFF',
                          titleFontSize: 16,
                          titleFontColor: '#0066ff',
                          titleMarginBottom: 10,
                          bodyFontColor: '#000',
                          bodyFontSize: 12,
                          displayColors: false,
                          xPadding:10,
                          yPadding:10,

                      },

                      legend: {
                        display: false,
                          labels: {
                            display: false
                          }
                      },
                      scales: {
                        yAxes: [{
                          ticks: {
                            beginAtZero:true,
                            fontSize: 12,
                            max: mx,
                            stepSize: Number(steps),
                          }
                        }],
                        xAxes: [{
                          ticks: {
                            beginAtZero:true,
                            fontSize: 11
                          }
                        }]
                      }
                    }
               });

          }
//clear the canvas object before anything.. 
function clearCanvas(){
  ctx = cv.getContext('2d');
  ctx.clearRect(0, 0, cv.width, cv.height);
  notifyCVS('retrieving data, please wait...');
}

   //this is the function referenced on the buttons.. 
   //example - <button onclick="setChartType('bar')"></button> 
   // and i have 3 buttons for 'line', 'bar', 'horizontalBar' types

function setChartType(type){
  clearCanvas();
  ctx = cv.getContext('2d');
  ctx.clearRect(0, 0, cv.width, cv.height);
  drawChart(cv, type);
}

//i call this function to write on the canvas when there is 
//no activity so that its not just a blank white object..

function notifyCVS(txt){
  ctx = cv.getContext('2d');
  ctx.clearRect(0, 0, cv.width, cv.height);
  ctx.fillStyle = "#777777";
  ctx.font = "Regular 12px Arial";
  ctx.fillText(String(txt), (cv.width / 2) - 17, (cv.height / 2) + 8);
}

这就是我的方法，图表和所有内容都可以使用，但是在单击不同的按钮后，鼠标移动的行为发生了变化，我不知道问题出在哪里，那仅仅是问题所在，闪烁的行为。

请问我该怎么办。

Answer 1

没有必要从字面上清除画布。但是，在重新初始化Chartjs对象之前，您需要对其进行销毁。因此，就像在同一画布上重新创建chartjs对象一样。您要做的就是在drawChart方法中创建对象之前检查实例是否已经存在。

function drawChart(cdiv, ctype){
      if(chartx){
            chartx.destroy();
      }
      chartx = new Chart(.....
      ...... 
}

当我在画布上移动鼠标时，图表Js闪烁或切换

1 个答案: