ChartJSをツールチップから切り落とさないようにするには？

Question

私はchartjsをツールチップから切り落とさないようにする方法を見つけ出そうとしていますが、これを修正する設定オプションが見つからないようです。

これは私がこれまで試してみましたものです：私のHTMLで

<script> 
     $(document).ready(function() { 


      var doughnutData = [ 
       { 
        value: 48.3, 
        color: "#81d7d8", 
        highlight: "#23c6c8", 
        label: "Accepted" 
       }, 
       { 
        value: 20.7, 
        color: "#f58894", 
        highlight: "#d9534f", 
        label: "Denied" 
       }, 
       { 
        value: 31, 
        color: "#f5c592", 
        highlight: "#f8ac59", 
        label: "Pending" 
       } 
      ]; 

      var doughnutOptions = { 
       segmentShowStroke: true, 
       segmentStrokeColor: "#fff", 
       segmentStrokeWidth: 2, 
       percentageInnerCutout: 45, // This is 0 for Pie charts 
       animationSteps: 100, 
       animationEasing: "easeOutBounce", 
       animateRotate: true, 
       animateScale: false, 
        fullWidth: true 
      }; 

      var ctx = document.getElementById("doughnutChart").getContext("2d"); 
      var DoughnutChart = new Chart(ctx).Doughnut(doughnutData, doughnutOptions); 



     }); 
    </script> 

をそれぞれのセクションでは、次のようになります。どのような私に私を指すことができ

<div class="col-lg-3"> 
    <div class="ibox float-e-margins"> 
     <div class="ibox-content"> 
      <canvas id="doughnutChart" width="95" height="95" style="width: 95px; height: 95px;"></canvas> 
     </div> 
    </div> 
</div> 

誰でもここに行方不明？

Answer 1

あなたはレガシーを使用しているのでV1.XをChart.js、あなたはv2.xのほど多くの可能性を持っていません。

問題を解決する簡単な方法の1つは、オプションでツールチップのスタイルを編集することです。これはあなたのチャートのheightとwidthのデフォルトの95pxは変更されません。

var doughnutOptions = { 
     // ... 
     fullWidth: true, 
     tooltipFontSize: 10 
    }; 

そしてthis resultを与えるだろう。