Chart.js - 鼠標懸停導致圖形閃爍並調整大小

要開始，I have made a short video to show exactly what I'm running into。Chart.js - 鼠標懸停導致圖形閃爍並調整大小

總結視頻：使用Chart.js（2.6.0）時，我可以毫無問題地創建我的圖表;但是當我將鼠標懸停在條/點上時，圖表將調整其元素和閃爍。奇怪的是它完全不一致。有時當我刷新時，它根本沒有這種行爲;但是如果我將鼠標懸停在某個東西上並開始這樣做，它將不會停止，直到我再次刷新或關閉標籤（與此不一致）。發生這種情況時，我不會更改代碼中的任何內容，但它本身就是這樣做的。

爲了解決這個問題，我在SO上引用了許多其他線程，以及Chart.js文檔。在我的解決方案中：我已經提出了將指定的高度/寬度添加到Divs & Canvas創建圖形;將動畫持續時間設置爲0，將懸停動畫持續時間設置爲0，將響應動畫持續時間設置爲0;我已確保將響應設置爲true，並且將維持縱橫比保持爲真，改變了工具提示模式......我嘗試了所有這些，以及其他似乎幾乎沒有影響的小事情。

我很難過！

這裏是我的圖表一個代碼（不如何我抓住了JSON數據等，只是圖）：

  new Chart($("#runwayChart"), { 
      type: "horizontalBar" 
      , data: { 
       labels: runwayLabels 
       , datasets: [{ 
        label: "Months Left" 
        , fill: true 
        , backgroundColor : "#3333ff" 
        , borderColor: "#3333ff" 
        , data: score 
        }, { 
        label: "Expenses" 
        , fill: true 
        , backgroundColor : "#aa2222" 
        , borderColor: "#aa2222" 
        , data: expenses 
        }, { 
        label: "Revenue" 
        , fill: true 
        , backgroundColor : "#2222aa" 
        , borderColor: "#2222aa" 
        , data: revenues 
        }] 
      } 
      , options: { 
       tooltips: { 
       mode:'index' 
      } 
      , responsive:true 
      , maintainAspectRatio:true 


      , animation: { 
       duration: 0, 
      } 
      , hover: { 
       animationDuration: 0, 
      } 
      , responsiveAnimationDuration: 0 
     }

我會很感激你都可以有任何的幫助！

感謝=）

來源

2017-08-16 Alex Gelinas

是您在ajax成功回調中的圖表代碼嗎？ –

我們使用的是Angular，而這一節特別是.then（）的一部分，如果我們的REST請求是成功的，它就會觸發。 –

它實際上是一個非常簡單的，奇的解決方案。

當數據點靠近圖表頂部時，圖表會嘗試根據div調整大小。由於圖表生活在一個更大的畫布中，因此放入自己的分區解決了這個問題。

<div> 
    <canvas id="chart"></canvas> 
</div>

格式化像這樣的是解決辦法=）

來源

2017-09-01 03:11:53

試試這個：

var myLineChart = null; 

      function createChart() { 
       var ctx1 = document.getElementById("barcanvas").getContext("2d"); 
       myLineChart = new Chart(ctx1, { 
        type: 'horizontalBar', 
        data: { 
         labels: runwayLabels 
         , datasets: [{ 
          label: "Months Left" 
          , fill: true 
          , backgroundColor : "#3333ff" 
          , borderColor: "#3333ff" 
          , data: score 
          }, { 
          label: "Expenses" 
          , fill: true 
          , backgroundColor : "#aa2222" 
          , borderColor: "#aa2222" 
          , data: expenses 
          }, { 
          label: "Revenue" 
          , fill: true 
          , backgroundColor : "#2222aa" 
          , borderColor: "#2222aa" 
          , data: revenues 
          }] 
        } 
        options: 
         { 
          scales: { 
           xAxes: [{ 
            ticks: { 
             callback: function (tick) { 
              var characterLimit = 20; 
              if (tick.length >= characterLimit) { 
               return tick.slice(0, tick.length).substring(0, characterLimit - 1).trim() + '...'; 
              } 
              return tick; 
             } 
            } 
           }] 
          }, 

          tooltips: { 
           callbacks: { 
            // We'll edit the `title` string 
            title: function (tooltipItem) { 
             // `tooltipItem` is an object containing properties such as 
             // the dataset and the index of the current item 

             // Here, `this` is the char instance 

             // The following returns the full string 
             return this._data.labels[tooltipItem[0].index]; 
            } 
           } 
          }, 

          title: 
          { 
           display: true, 
           text: "Your Chart Title" 
          }, 
          responsive: true, 
          maintainAspectRatio: true 
         } 
       }); 
      }

來源

2017-08-16 07:22:32

我嘗試了這一點，既是直接複製和粘貼，也是重寫它當前寫入的方式，以包含您添加的內容;但不幸的是，這並沒有解決問題。無論如何，謝謝你的迴應！ –

我看到，它已經有一段時間，因爲有人寫了一個回答這個職位。我通過應用兩件事來解決了閃爍問題。

第一個 當我宣佈我用圖表： var ctx = document.getElementById('chart').getContext('2d'); window.chart = new Chart(ctx, {}) ...

而不是var chart = new Chart(ctx, {})..

通過這種方式，我們確保圖表已追加到窗口。目的。

其次

之前繪製新圖（例如，用於數據更新），我們需要確保前面的帆布已被破壞。，我們可以檢查與下面的代碼： if(window.chart && window.chart !== null){ window.chart.destroy(); }

我希望這將節省一些時間給其他人。

謝謝

來源

2018-02-20 23:13:22

Chart.js - 鼠標懸停導致圖形閃爍並調整大小

回答

相關問題