如何将标签添加到Chart.jscanvas插件？
我使用了令人敬畏的插件Chart.js ，并试图在每个百分比内find显示标签的方式。 所以我GOOGLE了，我发现这拉： https ： //github.com/nnnick/Chart.js/pull/35
我做了一个简单的小提琴来testing它，但不起作用： 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的图表一样 。
顺便说一下，如果你推荐一个包含我上面提到的选项的html5图表选项，我会很高兴。 我听说过flot插件，但恐怕不支持animation…
如果您需要更多信息，请告诉我，我将编辑post。
你将不得不在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调用将把文本放到canvas上，所以你可以用它来写x，y坐标的文本。 你应该可以用这种方式来做基本的标签。 这里是jsfiddle修补与：
http://jsfiddle.net/nCFGL/ （查看上述代码的jsfiddle的JavaScript部分的第281行和第772行）
如果你需要一些更有趣的东西，有人会分发一个Charts.js版本并添加工具提示。 这里是讨论https://github.com/nnnick/Chart.js/pull/35 ，你可以在讨论中find分叉版本的链接。
这一个字面上花了几个小时，我find了一个工作的解决scheme。
https://github.com/nnnick/Chart.js/pull/116
这是我的最终代码。 我试图在甜甜圈上显示百分比作为标签
Chart.types.Doughnut.extend({ name: "DoughnutAlt", draw: function() { Chart.types.Doughnut.prototype.draw.apply(this, arguments); this.chart.ctx.fillStyle = 'black'; this.chart.ctx.textBaseline = 'middle'; this.chart.ctx.textAlign = 'start'; this.chart.ctx.font="18px Verdana"; var total = 0; for (var i = 0; i < this.segments.length; i++) { total += this.segments[i].value; } this.chart.ctx.fillText(total , this.chart.width / 2 - 20, this.chart.height / 2, 100); for(var i = 0; i < this.segments.length; i++){ var percentage = ((this.segments[i].value / total) * 100).toFixed(1); if( percentage > 3 ){ var centreAngle = this.segments[i].startAngle + ((this.segments[i].endAngle - this.segments[i].startAngle) / 2), rangeFromCentre = (this.segments[i].outerRadius - this.segments[i].innerRadius) / 2 + this.segments[i].innerRadius; var x = this.segments[i].x + (Math.cos(centreAngle) * rangeFromCentre); var y = this.segments[i].y + (Math.sin(centreAngle) * rangeFromCentre); this.chart.ctx.textAlign = 'center'; this.chart.ctx.textBaseline = 'middle'; this.chart.ctx.fillStyle = '#fff'; this.chart.ctx.font = 'normal 10px Helvetica'; this.chart.ctx.fillText(percentage , x, y); } } } });
有一个分叉版本ChartNew ，它可以提供这种function。
如果你需要使用ChartJS，那么你可以使用这个@ Jack的解决scheme的修订版本：
Chart.types.Doughnut.extend({ name: "DoughnutAlt", draw: function() { Chart.types.Doughnut.prototype.draw.apply(this, arguments); this.chart.ctx.fillStyle = 'black'; this.chart.ctx.textBaseline = 'middle'; this.chart.ctx.fillText(this.segments[0].value + "%", this.chart.width / 2 - 20, this.chart.width / 2, 200); } });
我已经想出了一个方法，以便我们可以显示每个地区的graphics外侧的值。
此外，我删除了值的旋转，我在这里提到
在“甜甜圈”function中添加以下几行代码。 （我从Chart.js文件中粘贴了修改过的行）。
var Doughnut = function(data,config,ctx){ var segmentTotal = 0; //In case we have a canvas that is not a square. Minus 10 pixels as padding round the edge. var doughnutRadius = Min([height/2,width/2]) - 15; var cutoutRadius = doughnutRadius * (config.percentageInnerCutout/100); //Modified for setting the label values out side the arc var outRadius= doughnutRadius + cutoutRadius/3; var outRadiustop= doughnutRadius + cutoutRadius/5; ...... ...... ...... function drawPieSegments (animationDecimal){ : : if (config.scaleShowValues) { ctx.save(); ctx.translate(width / 2, height / 2); ctx.font = config.scaleFontStyle + ' ' + config.scaleFontSize + 'px ' + config.scaleFontFamily; ctx.textBaselne = 'middle'; var a = (cumulativeAngle + cumulativeAngle + segmentAngle) / 2, w = ctx.measureText(data[i].value).width, b = Math.PI / 2 < a && a < Math.PI * 3 / 2; var c = 0 < a && a < Math.PI; if(b){ ctx.textAlign = 'right'; } else{ ctx.textAlign = 'left'; } if(c){ ctx.translate(Math.cos(a) * outRadius +1 , Math.sin(a) * outRadius+1); } else{ ctx.translate(Math.cos(a) * outRadiustop, Math.sin(a) * outRadiustop); } ctx.fillStyle = config.scaleFontColor; //If the segment angle less than 0.2, then the lables will overlap, so hiding it. if(segmentAngle > 0.2){ ctx.fillText(data[i].value,0,0); } ctx.restore(); } ...... ......
现在，这些值将显示在每个部分的旁边，并且不会被旋转。
