7

chartist.js を使用して、ラベル (凡例に表示されます) と円自体のパーセンテージを使用して円グラフを作成したいと考えています。

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

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

データにラベルを追加すると (例: labels: ['Dog','Cat','Cow','Snake',],)、結果は "NaN%" と表示されます。

円自体のパーセンテージを確認し、ラベル (凡例用) をデータに追加したいと考えています。

これは可能ですか？

4

2 に答える 2

13

ラベルを含む配列を保持し、 2 つのパラメーターを使用labelInterpolationFncしてインデックスを取得し、それを使用してパーセンテージで適切なラベルを取得する必要があります。

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;
  }
});
<script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
<link href="://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" rel="stylesheet"/>

<div class="ct-chart ct-perfect-fourth"></div>

labelsデータ配列 (シリーズのみ) で を使用してはならないことに注意してください。そうしないと、値パラメーターが値labelInterpolationFncではなくラベルで埋められ、パーセンテージを計算できなくなります。

于 2016-12-14T13:30:18.720 に答える
0

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

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

次に、シェアを計算するこの関数があります...

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

後でラベルを保持する配列を生成するときに、この関数を使用してテキストにパーセンテージを追加します...

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

ここで、dbresult[i].use は最初のラベル テキストで、dbresult[i].gri はチャートに送られる値です (両方ともデータベースから取得されます)。

結局、チャートを定義するときは、ラベルを追加するだけです...

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

于 2016-05-12T13:40:42.347 に答える