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

问题描述

我使用了真棒插件，我正在尝试找到在每个百分比内显示标签的方式。所以我googled它，我发现这拉：

我做了一个简单的小提琴来测试它，但不起作用：

I did a simple fiddle to test it, but doesn't works: 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'
    });
});

---

恐怕没有这方面的资讯。

此外，我想知道如何以显示每个部分的标签，但在图表之外。通过线连接。如同的图表。

Also I'd like to know how to display a label for each portion, but outside the chart. Linked by a line. As do the charts of highcharts.js.

顺便说一句，我很高兴，如果你推荐我一个html5图表选择，其中包括我上面说的选项。我听说过插件，但恐怕不支持动画...

By the way, I'd be glad if you recommend me an html5 chart alternative which includes the options I said above. I've heard about the flot plugin, but I'm afraid does not support animations...

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

If you need more info, let me know and I'll edit the post.

推荐答案

您必须在2个地方添加代码。例如，拿甜甜圈。首先将标签信息添加到默认值（查看原始的Chart.js代码并与之进行比较）：

You'll have to add code in 2 places. As an example, take the doughnut. First add label info to the defaults (look at the original Chart.js code and compare with this):

    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 行。

Then go down to where the Doughnut is drawn and add the four ctx lines.

    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修改：

The ctx.fillText call will put the text onto the canvas, so you can use that to write text with x,y coordinates. You ought to be able to use this way to do basic labels. Here is the jsfiddle to tinker with:

（查看上述代码的jsfiddle的JavaScript部分中的第281行和第772行）

http://jsfiddle.net/nCFGL/ (look at lines 281 and 772 in the JavaScript section of the jsfiddle for aforementioned code)

如果你需要某些东西，有人用一个版本的Charts。 js和添加的工具提示。以下是的讨论，并且您可以在该讨论中找到分叉版本的链接。

If you need something fancier, someone forked a version of Charts.js and added tooltips. Here is the discussion https://github.com/nnnick/Chart.js/pull/35, and you'll be able to find the link to the forked version inside that discussion.

这篇关于如何添加标签到Chart.js画布插件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！