我使用真棒插件
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>
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插件,但恐怕不支持动画…
如果你需要更多的信息,让我知道,我会编辑的帖子。
解决方法
你必须在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,你可以在讨论中找到分叉版本的链接。