如何在Chart.js画布插件中添加标签？

Question

我正在使用令人敬畏的插件Chart.js,我正试图在每个百分比内找到显示标签的方式.所以我用Google搜索了,我发现了这个问题:https://github.com/nnnick/Chart.js/pull/35

我做了一个简单的小提琴测试它,但不起作用:http://jsfiddle.net/marianico2/7ktug/1/

这是内容:

HTML

<canvas id="canvas" height="450" width="450"></canvas>

JS

$(document).ready(function () {
    var pieData = [{
        value: 30,
        color: "#F38630",
        label: 'HELLO',
        labelColor: 'black',
        labelFontSize: '16'
    }, {
        value: 50,
        color: "#E0E4CC"
    }, {
        value: 100,
        color: "#69D2E7"
    }];

    var myPie = new Chart(document.getElementById("canvas").getContext("2d")).Pie(pieData, {
        labelAlign: 'center'
    });
});

---

我担心文档中没有关于此的信息.

此外,我想知道如何为每个部分显示标签,但在图表之外.由一条线连接.和highcharts.js的图表一样.

顺便说一句,如果你推荐我一个html5图表替代品,包括我上面提到的选项,我会很高兴.我听说过flot插件,但我担心不支持动画......

如果您需要更多信息,请告诉我,我会编辑帖子.

Answer 1

你必须在2个地方添加代码.举个例子,拿甜甜圈.首先将标签信息添加到默认值(查看原始Chart.js代码并与此进行比较):

    chart.Doughnut.defaults = {
        segmentShowStroke : true,
        segmentStrokeColor : "#fff",
        segmentStrokeWidth : 2,
        percentageInnerCutout : 50,
        animation : true,
        animationSteps : 100,
        animationEasing : "easeOutBounce",
        animateRotate : true,
        animateScale : false,
        onAnimationComplete : null,
        labelFontFamily : "Arial",
        labelFontStyle : "normal",
        labelFontSize : 24,
        labelFontColor : "#666"
    };

然后下到甜甜圈的绘制地点并添加ctx四行.

    animationLoop(config,null,drawPieSegments,ctx);

    function drawPieSegments (animationDecimal){
        ctx.font = config.labelFontStyle + " " + config.labelFontSize+"px " + config.labelFontFamily;
        ctx.fillStyle = 'black';
        ctx.textBaseline = 'middle';
        ctx.fillText(data[0].value + "%", width/2 - 20, width/2, 200);

该ctx.fillText电话将把文本到画布上,这样你就可以用它来写与X文本,y坐标.你应该能够用这种方式做基本的标签.这是修补的jsfiddle:

http://jsfiddle.net/nCFGL/(查看上述代码的jsfiddle的JavaScript部分中的第281和772行)

如果你需要更高级的东西,有人会分叉一个版本的Charts.js并添加工具提示.这是讨论https://github.com/nnnick/Chart.js/pull/35,您将能够在该讨论中找到分叉版本的链接.

Answer 2

这个花了几个小时,我找到了一个有效的解决方案.

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

这是我的最终代码.我试图在甜甜圈上显示百分比作为标签

Chart.types.Doughnut.extend({
name: "DoughnutAlt",
draw: function() {
    Chart.types.Doughnut.prototype.draw.apply(this, arguments);
    this.chart.ctx.fillStyle = 'black';
    this.chart.ctx.textBaseline = 'middle';
    this.chart.ctx.textAlign = 'start';
    this.chart.ctx.font="18px Verdana";

    var total = 0;
    for (var i = 0; i < this.segments.length; i++) { 
        total += this.segments[i].value;      
    }

    this.chart.ctx.fillText(total , this.chart.width / 2 - 20, this.chart.height / 2, 100);
    for(var i = 0; i < this.segments.length; i++){
        var percentage = ((this.segments[i].value / total) * 100).toFixed(1);
        if( percentage > 3 ){
            var centreAngle = this.segments[i].startAngle + ((this.segments[i].endAngle - this.segments[i].startAngle) / 2),
                rangeFromCentre = (this.segments[i].outerRadius - this.segments[i].innerRadius) / 2 + this.segments[i].innerRadius;
            var x = this.segments[i].x + (Math.cos(centreAngle) * rangeFromCentre);
            var y = this.segments[i].y + (Math.sin(centreAngle) * rangeFromCentre);
            this.chart.ctx.textAlign = 'center';
            this.chart.ctx.textBaseline = 'middle';
            this.chart.ctx.fillStyle = '#fff';
            this.chart.ctx.font = 'normal 10px Helvetica';
            this.chart.ctx.fillText(percentage , x, y);
        }
     }
}
});