Chart.js v2.6:为饼图输出值添加箭头

2022-01-22 00:00:00 charts php javascript mysql chart.js

我正在使用 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,

演示

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>

相关文章