如何在 Chart.js 画布插件中添加标签? [英] How to add labels into Chart.js canvas plugin?

问题描述

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

I'm using the awesome plugin Chart.js, and I'm trying to find the way of display labels within each percentage. So I googled it, and I found this pull: https://github.com/nnnick/Chart.js/pull/35

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

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'
    });
});

<小时>

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

我还想知道如何为每个部分显示标签，但在图表之外.由线连接.highcharts.js 的图表也是如此.

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 图表替代品，其中包括我上面所说的选项，我会很高兴.我听说过 flot 插件，但我是怕不支持动画...

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:

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

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

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

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 画布插件中添加标签?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！