web-dev-qa-db-ja.com

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

最近、charts.jsライブラリを最新バージョン（2.5.0）に更新しました。このバージョンでは、グラフにラベルが表示されません。

私はフィドラーで作業する例があります： http://jsfiddle.net/g6fajwg8 。

ただし、例のようにグラフを正確に定義しましたが、それでもグラフ上のラベルを見ることができません。

注：GoogleやStackoverflowにはこのような質問がたくさんありますが、それらのほとんどは以前のバージョンに関するもので、うまく機能しています。

var config = {
    type: 'pie',
    data: {
        datasets: [{
            data: [
              1200,
              1112,
              533,
              202,
              105,
            ],
            backgroundColor: [
              "#F7464A",
              "#46BFBD",
              "#FDB45C",
              "#949FB1",
              "#4D5360",
            ],
            label: 'Dataset 1'
        }],
        labels: [
          "Red",
          "Green",
          "Yellow",
          "Grey",
          "Dark Grey"
        ]
    },
    options: {
        responsive: true,
        legend: {
            position: 'top',
        },
        title: {
            display: true,
            text: 'Chart.js Doughnut Chart'
        },
        animation: {
            animateScale: true,
            animateRotate: true
        }
    }
};

window.pPercentage = new Chart(ChartContext, config);

enter image description here

javascriptjquerychartschart.js
29
Jacob

そのようなビルドインオプションはないようです。

ただし、このオプションには特別なライブラリがあり、「 Chart PieceLabel 」を呼び出します。

デモ です。

スクリプトをプロジェクトに追加した後、「pieceLabel」という別のオプションを追加し、必要に応じてプロパティ値を定義できます。

pieceLabel: {
    // mode 'label', 'value' or 'percentage', default is 'percentage'
    mode: (!mode) ? 'value' : mode,

    // precision for percentage, default is 0
    precision: 0,

    // font size, default is defaultFontSize
    fontSize: 18,

    // font color, default is '#fff'
    fontColor: '#fff',

    // font style, default is defaultFontStyle
    fontStyle: 'bold',

    // font family, default is defaultFontFamily
    fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"
}
66
Jacob