chartist.js円グラフの円グラフと円のパーセンテージ

Question

グラフ（凡例に表示されています）を持つchartist.jsで円グラフを作成したいだけでなく、円グラフ自体にパーセンテージを作成したいと思います。

これは円グラフです。私は作品にパーセンテージの値を追加したい。 http://i.stack.imgur.com/SiIKb.png

ここで（https://gionkunz.github.io/chartist-js/examples.html）は、円でパーセンテージを持つ例です。しかし、これは、ラベルを追加しない場合にのみ機能します。

データにラベルを追加すると、「NaN％」というラベルが表示されます（ラベル：[Dog '、' Cat '、' Cow '、' Snake '、]）。

私はパイ自体のパーセンテージを見て、ラベル（凡例用）をデータに入れたいと思っています。

これは可能ですか？

Answer 1

あなたのラベルを含む配列を維持し、インデックスを取得し、割合で適切なラベルを取得するためにそれを使用するために、2つのパラメータでlabelInterpolationFncを使用する必要があります。私たちはlabelsを使用してはならない

var animals = ['Dog','Cat','Cow','Snake']; 

var data = { 
    series: [5, 3, 4] 
}; 

var sum = function(a, b) { return a + b }; 

new Chartist.Pie('.ct-chart', data, { 
    labelInterpolationFnc: function(value, idx) { 
    var percentage = Math.round(value/data.series.reduce(sum) * 100) + '%'; 
    return animals[idx] + ' ' + percentage; 
    } 
}); 

注意あなたのデータ配列（シリーズのみ）では、値の代わりにlabelInterpolationFncの値パラメータが値の代わりにラベルで埋められるので、パーセントを計算できませんでした。

Answer 2

あなた自身でラベルを作成する必要があるもの。 あなたは[Labeltext] + '|のような文字列を生成する必要があります。 '+ [共有]

私の場合は、すべてのパイの要素の総和を保持する変数... [griall]と呼ばれるを作成した....

が続いて株式を算出し、この機能があります。.. 。後、私は私がテキストに割合を追加するには、この機能を使用するラベルを保持する配列を生成する際に

\t \t function calcProz(value, griall) { 
 
\t \t \t return Math.round(value/griall * 100) + '%'; 
 
\t \t };

...

dbresult [I] .USE初期ラベルテキストとdbresult

\t \t chartlabels[i]=dbresult[i].use + ' | ' + calcProz(dbresult[i].gri,griall);

[I] .gri（データベースからの両方）チャートしようとしている値である

チャートを定義するときに、結局、あなただけのラベルを追加...

var data = { 
 
\t \t \t \t series: chartdata, 
 
\t \t // \t \t series: [25,16,15, 14, 4,2,1] 
 
\t \t \t \t labels: chartlabels 
 
\t \t 
 
\t \t };