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

Posted 2023-02-24

【中文标题】Chart.js v2.6：为饼图输出值添加箭头

【英文标题】：Chart.js v2.6: Add arrows to pie chart output values

【发布时间】：2018-01-03 06:23:17

【问题描述】：

我正在使用 Chart.js v2.6 输出饼图。数据来自 mysql 数据库。图表正确呈现，但我需要为数据值添加箭头，如下面的屏幕截图所示。

带箭头的饼图示例：

下面是我使用 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 代码。

【问题讨论】：

有趣！！但是，这在本地是不可能的。您可能需要创建一个图表插件。

@ℊααnd oh..okay，你对创建插件有什么想法吗？

这是一个类似的插件：github.com/emn178/Chart.PieceLabel.js

【参考方案1】：

您现在可以使用 Chart.PieceLabel.js 并获取 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>

【讨论】：

非常感谢。这是完美的。

如果你下载，段不在一起。