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：將箭頭添加到餅圖輸出值

回答

相關問題