2016-11-18 9 views
0

私はChart.jsで作業しており、何か助けが必要な問題があります。Chart.js - ドーナツの1つの部分にカーソルを置いたときに表示されるテキストのみを入力

ドーナツが正しく作成され、必要な情報が表示されますが、グラフの1つの部分にカーソルを置いたときに、その部分だけが塗りつぶしの値を表示します。

これは私がこのように表示されます

options = { 
    cutoutPercentage: 75, 
    rotation: Math.PI, 
    //circumference: Math.PI * values[0], 
    //segmentShowStroke: false, 
    animation: { 
     animateScale: true, 
     onComplete: function() { 
      var width = this.chart.width, 
       height = this.chart.height; 

      var fontSize = (height/114).toFixed(2); 
      this.chart.ctx.font = fontSize + "em Verdana"; 
      this.chart.ctx.textBaseline = "middle"; 

      var text = "82%", 
       textX = Math.round((width - this.chart.ctx.measureText(text).width)/2), 
       textY = height/2; 
      console.log(RpData); 
      this.chart.ctx.fillText(RpData.datasets[0].data[0] + "%", textX, textY); 
     } 
    }, 

    legend: { 
     display: false, 
    }, 
    tooltips: { 
     enabled: false, 
    }, 

}; 

$('#riskFactorChartLoading').hide("fast"); 
var ctx = $("#riskFactorChart").get(0).getContext("2d"); 

var riskFactorChart = new Chart(ctx, { 
    type: 'doughnut', 
    data: RpData, 
    options: options 
}); 

で働いていたコードです。私が達成しようとしています何

enter image description here

私の値を確認するために、それの上にマウスを移動することなく、マウスホバーの結果を確認することです。

ありがとうございました

答えて

1

あなたの完全なコードを入力してください。コードでは "RpData"が与えられていないので.... Chart JS snippet - (dkrvl2011)

ここ

は細かい作業jsfiddleリンクですが、あなたは完全なスニペットやコードへのリンクを与えられていないとして、我々は問題が何であるかを確認することができない...

関連する問題