41

我正在使用很棒的插件Chart.js，我正在尝试在每个百分比内找到显示标签的方式。所以我用谷歌搜索，我发现了这个拉：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插件，但恐怕不支持动画......

如果您需要更多信息，请告诉我，我将编辑帖子。

4

4 回答 4

32

您必须在 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，您将能够在该讨论中找到指向分叉版本的链接。

于 2013-08-23T23:00:08.807 回答
7

这个确实花了几个小时，我找到了一个可行的解决方案。

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);
        }
     }
}
});
于 2015-07-23T00:27:21.973 回答
3

我想出了一种方法，以便我们可以在图表之外显示每个区域的值。

我还删除了值的旋转，我在这里提到

在 Donut 函数中添加以下代码行。（我已经从 Chart.js 文件中粘贴了修改后的行）。

    var Doughnut = function(data,config,ctx){

    var segmentTotal = 0;

    //In case we have a canvas that is not a square. Minus 10 pixels as padding round the edge.
    var doughnutRadius = Min([height/2,width/2]) - 15;
    var cutoutRadius = doughnutRadius * (config.percentageInnerCutout/100);
    //Modified for setting the label values out side the arc
    var outRadius= doughnutRadius + cutoutRadius/3;
    var outRadiustop= doughnutRadius + cutoutRadius/5;
    ......
    ......
    ......

    function drawPieSegments (animationDecimal){
    :
    :



       if (config.scaleShowValues) {
                ctx.save();                
                ctx.translate(width / 2, height / 2);
                ctx.font = config.scaleFontStyle + ' ' + config.scaleFontSize + 'px ' + config.scaleFontFamily;
                ctx.textBaselne = 'middle';
                var a = (cumulativeAngle + cumulativeAngle + segmentAngle) / 2,
                    w = ctx.measureText(data[i].value).width,
                    b = Math.PI / 2 < a && a < Math.PI * 3 / 2;
                var c  = 0 < a && a < Math.PI;
                if(b){
                    ctx.textAlign = 'right';
                }
                else{
                    ctx.textAlign = 'left';
                }
                if(c){
                    ctx.translate(Math.cos(a) * outRadius +1 , Math.sin(a) * outRadius+1);

                }
                else{
                    ctx.translate(Math.cos(a) * outRadiustop, Math.sin(a) * outRadiustop);      
                }

                ctx.fillStyle = config.scaleFontColor;
                //If the segment angle less than 0.2, then the lables will overlap, so hiding it.
                if(segmentAngle > 0.2){
                    ctx.fillText(data[i].value,0,0);

                }
                ctx.restore();
     }

     ......
     ......

现在这些值将显示在每个部分的外侧，并且不会旋转。

于 2014-03-19T13:06:04.823 回答
3

有一个分叉版本ChartNew可以开箱即用地提供此功能。

如果您需要使用 ChartJS，那么您可以使用 @Jack 解决方案的修订版：

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.fillText(this.segments[0].value + "%", this.chart.width / 2 - 20, this.chart.width / 2, 200);
    }
});
于 2014-09-20T17:22:27.957 回答