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

我使用Chart.js v2.6来输出饼图。这些数据是从MySQL数据库中获得的。图表正确呈现，但我需要为数据值添加箭头，如下面的屏幕截图所示。Chart.js v2.6：将箭头添加到饼图输出值

例饼图带箭头：

以下为使用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', 
     }, 
    } 
});

我还没有为从获得的数据的PHP代码MySQLtable。

来源

2017-07-27 akshithDayanand

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

@ℊααnd噢..好吧，你有关于创建插件的任何想法？ – akshithDayanand

下面是一个类似的插件：https：//github.com/emn178/Chart.PieceLabel.js – beaver

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

来源

2018-01-10 16:20:40 Sajeetharan

非常感谢。这是完美的。 – akshithDayanand

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

回答

相关问题