Chart.js在饼图上显示标签 [英] Chart.js Show labels on Pie chart

问题描述

我最近将我的charts.js库更新为最新版本（2.5.0）。
这个版本没有显示图表上的标签。

我有一个在fiddler上工作的例子：

解决方案

似乎没有这样的内置选项。

但是，这个选项有特殊的库，它称之为： Chart PieceLabel 。

以下是他们的演示。

将脚本添加到项目后，您可能需要添加另一个名为pieceLabel的选项，并根据需要定义属性值：

  pieceLabel：{
 //模式'标签'，'价值'或'百分比'，默认为'百分比'
模式： （！模式）？ 'value'：mode，
 
 //百分比精度，默认为0 
 precision：0，
 
 //字体大小，默认为defaultFontSize 
 fontSize：18，
 
 //字体颜色，默认为'#fff'
 fontColor：'＃ff'，
 
 //字体样式，默认为defaultFontStyle 
 fontStyle：'bold'，
 
 //字体系列，默认为defaultFontFamily 
 fontFamily：'Helvetica Neue'，'Helvetica'，'Arial'，sans-serif 
} 
  

I recently updated my charts.js library to the most updated version (2.5.0). This version doesn't show the labels on the chart.

I have an example of working one on fiddler: http://jsfiddle.net/g6fajwg8 .

However, I defined my chart exactly as in the example but still can not see the labels on the chart.

Note: There are a lot of questions like this on Google and Stackoverflow but most of them are about previous versions which is working well on them.

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);

解决方案

It seems like there is no such build in option.

However, there is special library for this option, it calls: "Chart PieceLabel".

Here is their demo.

After you add their script to your project, you might want to add another option, called: "pieceLabel", and define the properties values as you like:

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"
}

这篇关于Chart.js在饼图上显示标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！