Chart.js - 円グラフにデータラベルのリーダーラインを表示

Question

私はChart.Jsで多くの演奏を行ってきましたが、時間制約とD3のSVGルートの個人的な好みのためキャンバス自体に入ることを避けていますet al。

私は、ダッシュボードページにチャートを混在させています.1つの問題を除いてすべてが素晴らしいと思われます。パイセグメントにマウスを置いて、基礎となる％または値を確認する必要があります。

https://support.office.com/en-gb/article/Display-or-hide-data-label-leader-lines-in-a-pie-chart-d7e7c62e-aaa5-483a-aa00-6d2c437df61b

他の問題点： - エクセルのように - おそらく簡単に画像を説明するために、

ダッシュボードビューでは、私のユーザーは、ちょうどすぐにセグメントにいくつかのデータラベルを見ることを好むだろう私がここで見つけた解決策は、単純に値をセグメントに表示しているに過ぎませんが、一部のセグメントは小さすぎて前方に行くことができません。

ツールチップを常に表示する他のソリューションもありましたが、オーバーラップが多く、一般的には非常に恐ろしいものでした。

伝説の横にデータが表示されても幸せですが、なぜもっと多くの人々が同じ機能を要求していないのか分かりません。

Answer 1

この機能はこれまで使用できませんでした。

Answer 2

実際には凡例内にデータを表示することができます（私は職場で作成したダッシュボードでこれを行っています）。これを実現するには、generateLabelslegend label propertyを使用するだけです。

凡例内の括弧内のデータ値を表示する例です（これは、関数から返された凡例項目textプロパティで行われます）。

generateLabels: function(chart) { 
    var data = chart.data; 
    if (data.labels.length && data.datasets.length) { 
    return data.labels.map(function(label, i) { 
     var meta = chart.getDatasetMeta(0); 
     var ds = data.datasets[0]; 
     var arc = meta.data[i]; 
     var custom = arc.custom || {}; 
     var getValueAtIndexOrDefault = Chart.helpers.getValueAtIndexOrDefault; 
     var arcOpts = chart.options.elements.arc; 
     var fill = custom.backgroundColor ? custom.backgroundColor : getValueAtIndexOrDefault(ds.backgroundColor, i, arcOpts.backgroundColor); 
     var stroke = custom.borderColor ? custom.borderColor : getValueAtIndexOrDefault(ds.borderColor, i, arcOpts.borderColor); 
     var bw = custom.borderWidth ? custom.borderWidth : getValueAtIndexOrDefault(ds.borderWidth, i, arcOpts.borderWidth); 

     return { 
     // here is where we are adding the data values to the legend title 
     text: label + " (" + ds.data[i].toLocaleString() + ")", 
     fillStyle: fill, 
     strokeStyle: stroke, 
     lineWidth: bw, 
     hidden: isNaN(ds.data[i]) || meta.data[i].hidden, 
     index: i // extra data used for toggling the correct item 
     }; 
    }); 
    } else { 
    return []; 
    } 
} 

codepenで実際に確認できます。