jquery - 如何将标签添加到 Chart.js Canvas 插件中？

Question

我正在使用很棒的插件 Chart.js ，我试图找到每个百分比内显示标签的方式。所以我用谷歌搜索了一下，我发现了这个拉:https://github.com/nnnick/Chart.js/pull/35

我做了一个简单的 fiddle 来测试它，但不起作用: 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'
    });
});

---

恐怕documentation 中没有关于此的信息.

我还想知道如何为每个部分显示一个标签，但在图表之外。用一条线连接起来。与 highcharts.js 的图表一样.

顺便说一句，如果您向我推荐一个 html5 图表替代方案，其中包括我上面提到的选项，我将非常高兴。我听说过 flot插件，但恐怕不支持动画...

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

Answer 1

您必须在 2 个地方添加代码。以 donut 为例。首先将标签信息添加到默认值(查看原始 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"
    };

然后向下到绘制 donut 的位置并添加四行 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 调用会将文本放到 Canvas 上，因此您可以使用它来编写带有 x,y 坐标的文本。你应该能够使用这种方式来做基本的标签。这是要修改的 jsfiddle:

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

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