Chart.js - マウスオーバーでグラフがちらつき、サイズが変更されます

Question

開始するにはI have made a short video to show exactly what I'm running into。

ビデオを要約すると、Chart.js（2.6.0）を使用している間は、問題なくチャートを作成できます。バー/ポイントにマウスオーバーすると、グラフの要素のサイズが変更されてちらつきます。奇妙なことは、それは完全に矛盾しているということです。ときどきリフレッシュすると、この動作はまったくありません。私が何かの上にマウスを置いてそれをやり始めると、私は再びリフレッシュするか、タブから閉じます（これと矛盾します）。これが発生したときに私はコード内で何も変更しません。それはすべてこれを単独で行います。

これを修正するために、私はSOとChart.jsのドキュメントの他の多くのスレッドをここで参照しました。私の解決策の中で：私はDivsに指定された高さ/幅を追加する点を作った&グラフを作成するCanvas;アニメーションの持続時間を0、ホバーアニメーションの持続時間を0、レスポンシブアニメーションの持続時間を0に設定します。 Responsiveがtrueに設定され、Aspect Ratioを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 
     } 

私はあなたのすべてが持つかもしれない助けをいただければと思います！

感謝=）

Answer 1

それは実際には本当に簡単、奇数溶液でした。

データポイントがグラフの最上部付近にある場合、グラフはdivに応じてサイズ変更しようとします。チャートがより大きなキャンバスに住んでいたので、自分自身の内部にこの問題を解決しました。このようにそれをフォーマット

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

は、私は、誰かがこの投稿に返事を書いたので、それがしばらくされていることを確認ソリューション=）

Answer 2

これを試してみてください。

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 
         } 
       }); 
      } 

Answer 3

ました。 私は2つの事を適用することによって私のちらつきの問題を解決しました。

第1 私は私が使用するチャートを宣言する場合：このように 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(); }

私はこれが他の人にいくつかの時間を節約することを願っています。

ありがとうございました