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

我使用真棒插件 Chart.js，我试图找到显示标签的方式在每个百分比。所以我googled它，我发现这拉： https://github.com/nnnick/Chart.js/pull/35

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

这是内容：

HTML

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

$(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 插件，但恐怕不支持动画…

如果你需要更多的信息，让我知道，我会编辑的帖子。

解决方法

你必须在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，你可以在讨论中找到分叉版本的链接。

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

解决方法

猜你在找的jQuery相关文章