各アークドーナツの値を表示するChart.js

Question

私はchart.jsで1つのグラフィックを作成しています。私はグラフを動作させることができますが、私はグラフの各弧に値を表示したいと思います。 私はインターネットで見たものすべてを見て、何も私を助けませんでした。

ツールチップを使用するのではなく、私は各アークのデータを持っていたかったのです。それは可能ですか？

マイコード：

var randomScalingFactor = function() { 
return Math.round(Math.random() * 100); 
}; 
var car = { 
labels: ["January", "February", "March", "April", "May"], 
datasets: [{ 
    data: [ 
     randomScalingFactor(), 
     randomScalingFactor(), 
     randomScalingFactor(), 
     randomScalingFactor(), 
     randomScalingFactor(), 
    ], 
    backgroundColor: [ 
     window.chartColors.red, 
     window.chartColors.orange, 
     window.chartColors.yellow, 
     window.chartColors.green, 
     color(window.chartColors.black).alpha(0.4).rgbString() 
    ],borderColor: [ 
     'white', 
     'white', 
     'white', 
     'white', 
     'white' 
    ], 
    borderWidth: 5, 

}], 

    }; 


window.onload = function() { 
var ctx = document.getElementById("chart-area").getContext("2d"); 
window.myDoughnut = new Chart(ctx, { 
    type: 'doughnut', 
    data: car, 
    showDatapoints: true, 
    options: { 
    scaleShowLabels: true, 
     responsive: true, 
     legend: { 
      position: 'bottom', 
     }, 
     title: { 
      display: true, 
      text: 'Idades', 
      fontSize:20 
     }, 
     animation: { 
      animateScale: true, 
      animateRotate: true 
     } 
    } 
}); 

}; 

これは私が持っているものです。 http://imgur.com/FpICd3d

これは私がふりです： http://imgur.com/UX09lbM

誰かが私を助けることができますか？

Answer 1

はい！それは絶対に可能です。

あなたがあなた自身ののプラグインを作成することができますが、私は達成することがはるかに容易になりChart.PieceLabel.js呼ばChartJS プラグインを、使用することをお勧めだろうけど。

使い方^{それは何の値を示していないので、結果は動作しないよう、同じである、あなたのチャートオプション}

pieceLabel: { 
    mode: 'value' 
} 

---

var randomScalingFactor = function() { 
 
    return Math.round(Math.random() * 100); 
 
}; 
 
var ctx = document.getElementById("chart-area").getContext("2d"); 
 
var myDoughnut = new Chart(ctx, { 
 
    type: 'doughnut', 
 
    data: { 
 
     labels: ["January", "February", "March", "April", "May"], 
 
     datasets: [{ 
 
      data: [ 
 
       randomScalingFactor(), 
 
       randomScalingFactor(), 
 
       randomScalingFactor(), 
 
       randomScalingFactor(), 
 
       randomScalingFactor(), 
 
      ], 
 
      backgroundColor: ['#ff3d67', '#ff9f40', '#ffcd56', '#4bc0c0', '#999999'], 
 
      borderColor: 'white', 
 
      borderWidth: 5, 
 
     }] 
 
    }, 
 
    showDatapoints: true, 
 
    options: { 
 
     tooltips: { 
 
      enabled: false 
 
     }, 
 
     pieceLabel: { 
 
      mode: 'value' 
 
     }, 
 
     responsive: true, 
 
     legend: { 
 
      position: 'bottom', 
 
     }, 
 
     title: { 
 
      display: true, 
 
      text: 'Idades', 
 
      fontSize: 20 
 
     }, 
 
     animation: { 
 
      animateScale: true, 
 
      animateRotate: true 
 
     } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> 
 
<script src="https://cdn.rawgit.com/emn178/Chart.PieceLabel.js/master/build/Chart.PieceLabel.min.js"></script> 
 
<canvas id="chart-area"></canvas>