热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Chart.js在饼图上显示标签

如何解决《Chart.js在饼图上显示标签》经验,为你挑选了1个好方法。

我最近将我的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);

在此输入图像描述



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


我现在建议使用https://github.com/chartjs/chartjs-plugin-datalabels。它是Chart.JS的官方软件包,并且似乎得到了更好的支持。
推荐阅读
author-avatar
超级冷笑话驿站料_663
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有