Chart.js v2.6:向饼图输出值添加箭头 [英] Chart.js v2.6: Add arrows to pie chart output values
本文介绍了Chart.js v2.6:向饼图输出值添加箭头的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我使用Chart.js v2.6输出饼图。数据从MySQL数据库获得。图表正确呈现,但我需要向数据值添加箭头,如下面的屏幕截图所示。
I am using Chart.js v2.6 to output a pie chart. The data is obtained from MySQL database. The chart renders properly, but I need to add arrows to data values as shown in the screenshot below.
带箭头的示例饼图:
以下是使用Chart.js输出饼图的代码:
Below is my code to output pie chart using Chart.js:
var chartdata_order_status = {
labels: status,
datasets: [{
label: 'Order status',
backgroundColor: ["#00b0f0","#92d050","#ffc000","#ff6dd9"],
data: count_status
}]
};
var pieGraph = new Chart(ctx3, {
type: 'pie',
data: chartdata_country_orders,
options: {
pieceLabel: {
mode: 'value',
position: 'outside',
fontColor: '#000',
format: function (value) {
return '$' + value;
}
},
title: {
display: true,
text: 'Total Sales by Country - Top 5',
fontSize: 15,
fontStyle: 'bold'
},
legend: {
display: true,
position: 'bottom',
},
}
});
我没有包含用于从MySQLtable获取数据的PHP代码。
I have not included the PHP code for obtaining data from the MySQLtable.
推荐答案
您现在可以使用 Chart.PieceLabel.js
并获取slices.s以外的标签,
You can now use Chart.PieceLabel.js
and get labels outside the slices.s,
DEMO
angular.module("app", ["chart.js"]).controller("ChartCtrl", function($scope) {
$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
$scope.data = [65, 59, 80, 81, 56, 55, 40];
$scope.options = {
pieceLabel: {
render: 'label',
fontColor: '#000',
position: 'outside',
segment: true
}
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<script src="https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.js"></script>
<script src="https://rawgit.com/beaver71/Chart.PieceLabel.js/master/build/Chart.PieceLabel.min.js"></script>
<div ng-app="app" ng-controller="ChartCtrl">
<canvas id="pie" class="chart chart-pie"
chart-data="data" chart-labels="labels" chart-options="options">
</canvas>
</div>
这篇关于Chart.js v2.6:向饼图输出值添加箭头的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文