Chart.js v2.6: Fügen Sie Pfeile, um Kreisdiagramm-output-Werte

Ich bin mit Chart.js v2.6 zur Ausgabe eines Kreisdiagramms. Die Daten aus der MySQL-Datenbank. Der chart stellt richtig, aber ich muss hinzufügen Pfeile, um Daten-Werte, wie in der Abbildung unten gezeigt.

Beispiel Kreisdiagramm mit Pfeilen:

Chart.js v2.6: Fügen Sie Pfeile, um Kreisdiagramm-output-Werte

Unten ist mein code für die Ausgabe Kreisdiagramm verwenden 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',
        },
    } 
});

Ich nicht der PHP-code, um Daten aus der MySQLtable.

  • Interessant !! Aber nicht nativ. Sie benötigen könnten, um ein Diagramm zu erstellen-plugin.
  • oh..okay,Sie haben eine Idee über das erstellen des plugins?
  • Hier ist ein plugin, das macht etwas ähnliches: github.com/emn178/Chart.PieceLabel.js
InformationsquelleAutor akshithDayanand | 2017-07-27
  1. 4

    Können Sie jetzt mit Chart.PieceLabel.js und bekommen Etiketten außerhalb der Scheiben.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>
    • Vielen Dank.Das ist perfekt.
    • wenn Sie den download segment nicht zusammen kommen.
    InformationsquelleAutor Sajeetharan
Schreibe einen Kommentar