円グラフのchart.jsにラベルを追加する方法

user3440583:

円グラフを表示しています。しかし、円グラフでラベルを表示する方法。

以下は円グラフのchart.jsコードです。

this.Pie = function(data, options) {

  chart.Pie.defaults = {
    segmentShowStroke: true,
    segmentStrokeColor: "#fff",
    segmentStrokeWidth: 2,
    animation: true,
    animationSteps: 100,
    animationEasing: "easeOutBounce",
    animateRotate: true,
    animateScale: false,
    onAnimationComplete: null
  };

  var config = (options) ? mergeChartConfig(chart.Pie.defaults, options) : chart.Pie.defaults;

  return new Pie(data, config, context);
};

以下は円グラフを表示するためのhtmlファイルのコードです

コード:

var data = [{
  value: 20,
  color: "#637b85"
}, {
  value: 30,
  color: "#2c9c69"
}, {
  value: 40,
  color: "#dbba34"
}, {
  value: 10,
  color: "#c62f29"
}];

var canvas = document.getElementById("hours");
var ctx = canvas.getContext("2d");
new Chart(ctx).Pie(data);
FiringSquadWitness:

編集:http : //jsfiddle.net/nCFGL/223/私の例。

あなたは次のようにできるはずです:

var pieData = [{
    value: 30,
    color: "#F38630",
    label: 'Sleep',
    labelColor: 'white',
    labelFontSize: '16'
  },
  ...
];

次の場所にあるChart.jsを含めます。

https://github.com/nnnick/Chart.js/pull/35

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

Chart.js円グラフにラベルを表示する

分類Dev

円グラフの凡例-Chart.js

分類Dev

Chart.jsを理解し、円グラフに凡例を追加する

分類Dev

Chart.js円グラフのセクションを非表示にする方法

分類Dev

Chart.js v1で色付きの凡例ボックスを円グラフに追加する方法は?

分類Dev

Chart.jsを使用して棒グラフにラベルの正方形を追加する方法

分類Dev

JavaFXの円グラフに追加ラベルを表示します

分類Dev

chart.jsを使用して円グラフでラベルとラベルの値を動的に表示するにはどうすればよいですか?

分類Dev

円グラフ-円グラフのxラベルを削除し、その横にiteを表示する方法は?

分類Dev

ボケ味の円グラフウェッジにラベルを追加する

分類Dev

円グラフにラベルを追加する

分類Dev

Chart.js円グラフのパーツに値を表示する

分類Dev

SVG /D3.js円グラフのラベルの前に画像を追加する

分類Dev

Chart.js v2.6:円グラフの出力値に矢印を追加

分類Dev

CorePlotの円グラフにラベルを追加する:方法がわからない

分類Dev

ラベルを円グラフの中央に配置する

分類Dev

dc.js円グラフにラベルを配置する方法は?

分類Dev

Quantrix:QuantrixMatrixの円グラフ内にラベルを入力する方法

分類Dev

表示に関するchart.js円グラフの問題:なし

分類Dev

Matplotlib円グラフ-ラベルを中央に配置する方法は?

分類Dev

dc.jsを使用して円グラフの外部ラベルが重ならないようにする方法

分類Dev

Chart.jsng2-円グラフのグラフの色が表示されない

分類Dev

Google円グラフドーナツの中央にラベルを追加します

分類Dev

chart.jsで各スライスの円グラフデータ値を表示する方法

分類Dev

チャートへのラベルの追加js円グラフ

分類Dev

円グラフのデータラベルを揃える方法

分類Dev

Chart.jsの円グラフのクリックイベント

分類Dev

dc.jsの円グラフラベルにパーセンテージを追加します

分類Dev

Chart.js v2:ツールチップを常に円グラフに表示する方法

Related 関連記事

  1. 1

    Chart.js円グラフにラベルを表示する

  2. 2

    円グラフの凡例-Chart.js

  3. 3

    Chart.jsを理解し、円グラフに凡例を追加する

  4. 4

    Chart.js円グラフのセクションを非表示にする方法

  5. 5

    Chart.js v1で色付きの凡例ボックスを円グラフに追加する方法は?

  6. 6

    Chart.jsを使用して棒グラフにラベルの正方形を追加する方法

  7. 7

    JavaFXの円グラフに追加ラベルを表示します

  8. 8

    chart.jsを使用して円グラフでラベルとラベルの値を動的に表示するにはどうすればよいですか?

  9. 9

    円グラフ-円グラフのxラベルを削除し、その横にiteを表示する方法は?

  10. 10

    ボケ味の円グラフウェッジにラベルを追加する

  11. 11

    円グラフにラベルを追加する

  12. 12

    Chart.js円グラフのパーツに値を表示する

  13. 13

    SVG /D3.js円グラフのラベルの前に画像を追加する

  14. 14

    Chart.js v2.6:円グラフの出力値に矢印を追加

  15. 15

    CorePlotの円グラフにラベルを追加する:方法がわからない

  16. 16

    ラベルを円グラフの中央に配置する

  17. 17

    dc.js円グラフにラベルを配置する方法は?

  18. 18

    Quantrix:QuantrixMatrixの円グラフ内にラベルを入力する方法

  19. 19

    表示に関するchart.js円グラフの問題:なし

  20. 20

    Matplotlib円グラフ-ラベルを中央に配置する方法は?

  21. 21

    dc.jsを使用して円グラフの外部ラベルが重ならないようにする方法

  22. 22

    Chart.jsng2-円グラフのグラフの色が表示されない

  23. 23

    Google円グラフドーナツの中央にラベルを追加します

  24. 24

    chart.jsで各スライスの円グラフデータ値を表示する方法

  25. 25

    チャートへのラベルの追加js円グラフ

  26. 26

    円グラフのデータラベルを揃える方法

  27. 27

    Chart.jsの円グラフのクリックイベント

  28. 28

    dc.jsの円グラフラベルにパーセンテージを追加します

  29. 29

    Chart.js v2:ツールチップを常に円グラフに表示する方法

ホットタグ

アーカイブ