Winkel-Diagramme - Diagramm,zeigen Etiketten in jedem Stück von Daten

Ich bin Lernphase von Winkel-Diagramm-js. Ich bin versucht, angular-chart.js zeichnen Sie ein Kreisdiagramm. Aber ich bin nicht in der Lage einen Weg zu finden, die zeigen, Etiketten (keine tooltips) auf das Kreisdiagramm, das beschreibt jedes Stück von Daten.

Hier ist, wie ich es gemacht habe:

JS:

angular.module('App').controller('Controller', ['$scope', '$http', '$location', '$window', '$routeParams',
    function($scope, $http, $location, $window) {
        var diskDataJson = {
            "data": [80, 12],
            "labels": [Used space, Free Space],
            "colours": ['#9AB6F0', '#C2D3F6']
        };
    
        $scope.pieDiskData = json;
    }
]);

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table border="0" width="100%">
  <tr>
    <td style="border-left: 1px solid #0099CC" width="25%">
      <center><span><label ng-bind-html="'load.static.dashboard.system.DUSAGE' | translate"/></span>
      </center>
      <canvas id="pie33" class="chart chart-pie chart-xs ng-isolate-scope" height="120" width="240" data="pieDiskData.data" labels="pieDiskData.labels" colours="pieDiskData.colours" legend="true"></canvas>
    </td>
  </tr>
</table>

InformationsquelleAutor Panchaxari Hiremath | 2015-07-30
  1. 4

    Angepasst https://stackoverflow.com/a/25913101/360067 für Winkel-Diagramm

    Fügen Sie den folgenden options Ihrem Umfang

    $scope.options = {
    tooltipEvents: [],
    showTooltips: true,
    tooltipCaretSize: 0,
    onAnimationComplete: function () {
        this.showTooltip(this.segments, true);
    },
};

    Verwenden und diese in Ihrer Richtlinie

    <canvas id="pie33" options="options"...

    Geige (mit den entsprechenden Abschnitten aus dem code) - http://jsfiddle.net/zuhp8k5f/154/

    Winkel-Diagramme - Diagramm,zeigen Etiketten in jedem Stück von Daten

    • Ja, ich verstehe jetzt,Im Winkel-Diagramm wir verwenden können, customizied Optionen aus chart.js für die Verwaltung von tooltips
    • hoffe, dass Ihr Problem gelöst. Prost!
    • Ja, es hat mein problem lösen.:)
    • Gut zu hören! Sie vielleicht wollen, markieren Sie die Antwort, als dann auch akzeptiert. Prost!
    • Ich war mir nicht bewusst, ich habe die Antwort akzeptieren!! Dank
    • kannst du die Geige, weil in der obigen "jsfiddle.net/zuhp8k5f" ich konnte nicht chart anzeigen
    • Die Geige scheint nicht mehr zu funktionieren @potatopeelings
    • danke! Die rawgit link für eckige chart.js war, deutete auf den dist Ordner auf master. Ich habe es geändert Punkt, um die spezifische version.
    • Ich bin mit version 2.7.0 und das wird nicht funktionieren.

    InformationsquelleAutor potatopeelings
Schreibe einen Kommentar