我正在为客户重新编写一个应用程序,他们想要显示一个图表。他们目前使用基础设施图表,他们很想停止使用它,但布局必须保持不变。
这是他们想要的布局(所以标签应该是可见的,单独的条,......)
所以我的第一个选择是尝试 Chart.js,但我只能得到这样的东西:
所以基本上唯一需要发生的事情是一种始终显示标签的方法。
数据是通过 angular 提供的,如果是整数,则只是一个数组。对图表使用以下指令:http://jtblin.github.io/angular-chart.js/
我当前的 html:
<canvas id="polar" class="chart chart-polar-area" data="data.values" labels="data.labels" width="200" height="200"
options="{animateRotate: false}"></canvas>
我找到了这个; How to add label in chart.js for pie chart 但我无法让它工作
最佳答案
基于 ChartJS: Change the positions of the tooltips
预览
将上面的转换为 angular-chart 很容易,因为我们只设置选项。然而,我们需要做 2 个小改动(即从 this
设置图表和 ctx 变量
// THIS IS REQUIRED AND WAS ADDED
tooltipEvents: [],
onAnimationComplete: function () {
// THESE 2 LINES ARE NEW
var chart = this.chart;
var ctx = this.chart.ctx;
this.segments.forEach(function (segment) {
var outerEdge = Chart.Arc.prototype.tooltipPosition.apply({
// THESE 2 LINES WERE CHANGED
x: chart.width / 2,
y: chart.height / 2,
startAngle: segment.startAngle,
endAngle: segment.endAngle,
outerRadius: segment.outerRadius * 2 + 10,
innerRadius: 0
})
...
假设您包含库脚本的整个代码看起来像这样
HTML
<div ng-app="myApp">
<div ng-controller="myController">
<canvas id="polar-area" class="chart chart-polar-area" data="data" labels="labels" options="options"></canvas>
</div>
</div>
脚本
angular.module('myApp', ["chart.js"]);
angular.module('myApp').controller('myController', function ($scope) {
$scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales", "Tele Sales", "Corporate Sales"];
$scope.data = [300, 500, 100, 40, 120];
$scope.options = {
scaleOverride: true,
scaleStartValue: 0,
scaleStepWidth: 40,
scaleSteps: 10,
tooltipEvents: [],
onAnimationComplete: function () {
var chart = this.chart;
var ctx = this.chart.ctx;
this.segments.forEach(function (segment) {
var outerEdge = Chart.Arc.prototype.tooltipPosition.apply({
x: chart.width / 2,
y: chart.height / 2,
startAngle: segment.startAngle,
endAngle: segment.endAngle,
outerRadius: segment.outerRadius * 2 + 10,
innerRadius: 0
})
var normalizedAngle = (segment.startAngle + segment.endAngle) / 2;
while (normalizedAngle > 2 * Math.PI) {
normalizedAngle -= (2 * Math.PI)
}
if (normalizedAngle < (Math.PI * 0.4) || (normalizedAngle > Math.PI * 1.5))
ctx.textAlign = "start";
else if (normalizedAngle > (Math.PI * 0.4) && (normalizedAngle < Math.PI * 0.6)) {
outerEdge.y += 5;
ctx.textAlign = "center";
}
else if (normalizedAngle > (Math.PI * 1.4) && (normalizedAngle < Math.PI * 1.6)) {
outerEdge.y - 5;
ctx.textAlign = "center";
}
else
ctx.textAlign = "end";
ctx.fillText(segment.label, outerEdge.x, outerEdge.y);
})
}
}
}
);
fiddle - http://jsfiddle.net/tmzpy7Lt/
关于javascript - Chart.js 始终可见的标签,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/31805494/