web-dev-qa-db-ja.com

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

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

以下は、円グラフの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);
javascriptcharts
27
user3440583

編集： 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

16
FiringSquadWitness

NewChartのような別のライブラリを使用したり、他の人のプルリクエストを使用してこれを実行する必要はありません。あなたがしなければならないのは、オプションオブジェクトを定義し、ツールチップで好きな場所にラベルを追加することです。

_var optionsPie = {
    tooltipTemplate: "<%= label %> - <%= value %>"
}
_

ツールチップを常に表示する場合は、オプションに他のいくつかの編集を加えることができます。

_ var optionsPie = {
        tooltipEvents: [],
        showTooltips: true,
        onAnimationComplete: function() {
            this.showTooltip(this.segments, true);
        },
        tooltipTemplate: "<%= label %> - <%= value %>"
    }
_

データアイテムに、目的のラベルプロパティと値を追加する必要があります。

_data = [
    {
        value: 480000,
        color:"#F7464A",
        highlight: "#FF5A5E",
        label: "Tobacco"
    }
];
_

さて、あなたがしなければならないのは、次のようにデータの後にオプションオブジェクトを新しいパイに渡すことです：new Chart(ctx).Pie(data,optionsPie)、これで完了です。

これはおそらく、サイズがそれほど小さくないパイに最適です。

ラベル付き円グラフ

40
Ivan Dimov

Rachelのソリューションは正常に機能していますが、 raw.githubusercontent.com のサードパーティスクリプトを使用する必要があります

今では、「モジュール」スクリプトを広告するときにランディングページに表示する機能があります。次の構造を持つ凡例を見ることができます。

<div class="labeled-chart-container">
    <div class="canvas-holder">
        <canvas id="modular-doughnut" width="250" height="250" style="width: 250px; height: 250px;"></canvas>
    </div>

<ul class="doughnut-legend">
    <li><span style="background-color:#5B90BF"></span>Core</li>
    <li><span style="background-color:#96b5b4"></span>Bar</li>
    <li><span style="background-color:#a3be8c"></span>Doughnut</li>
    <li><span style="background-color:#ab7967"></span>Radar</li>
    <li><span style="background-color:#d08770"></span>Line</li>
    <li><span style="background-color:#b48ead"></span>Polar Area</li>
</ul>
</div>

これを実現するには、チャート構成オプションlegendTemplateを使用します

legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"

この詳細は chartjs.org で確認できます。これは global chart configuration の一部ではありませんが、すべてのチャートで機能します。

次に、凡例を作成し、次のようにDOMに追加します。

var legend = myPie.generateLegend();
$("#legend").html(legend);

Samplemy JSFiddle sample も参照してください

9
Smamatti

Chart.jsの代わりに ChartNew.js を使用します

...

そこで、Chart.jsを作り直しました。変更のほとんどは、Chart.jsの「GitHub」問題のリクエストに関連付けられています。

そして、ここにサンプルがあります http://jsbin.com/lakiyu/2/edit

var newopts = {
    inGraphDataShow: true,
    inGraphDataRadiusPosition: 2,
    inGraphDataFontColor: 'white'
}
var pieData = [
    {
        value: 30,
        color: "#F38630",
    },
    {
       value: 30,
       color: "#F34353",
    },
    {
        value: 30,
        color: "#F34353",
    }
]
var pieCtx = document.getElementById('pieChart').getContext('2d');
new Chart(pieCtx).Pie(pieData, newopts);

GUIエディターも提供します http://charts.livegap.com/

とても甘い。

8
Frank Fang

新しいバージョンのChart.jsを使用している場合は、オプションでtooltips.callbacks.labelのコールバックを設定することにより、ラベルを設定できます。

この例は次のとおりです。

var chartOptions = {
    tooltips: {
        callbacks: {
            label: function (tooltipItem, data) {
                return 'label';
            }
        }
    }
}
4
arockburn