Daten in einem Balkendiagramm darstellen AngularJS, Wie erstellt man ein gutes Multi-Balkendiagramm?

Question

Angenommen, ich Faltenbalgbefestigung JSON haben:

[ 
     { 
      month: "Jan", 
      cost: 80, 
      energy: 90 
     }, 
     { 
      month: "Feb", 
      cost: 50, 
      energy: 80 
     }, 
     { 
      month: "Mar", 
      cost: 90, 
      energy: 40 
     }, 
     { 
      month: "Apr", 
      cost: 80, 
      energy: 90 
     }, 
     { 
      month: "May", 
      cost: 50, 
      energy: 80 
     }, 
     { 
      month: "Jun", 
      cost: 70, 
      energy: 40 
     }, 
     { 
      month: "Jul", 
      cost: 40, 
      energy: 70 
     }, 
     { 
      month: "Aug", 
      cost: 80, 
      energy: 90 
     }, 
     { 
      month: "Sep", 
      cost: 90, 
      energy: 90 
     }, 
     { 
      month: "Oct", 
      cost: 40, 
      energy: 90 
     }, 
     { 
      month: "Nov", 
      cost: 20, 
      energy: 50 
     }, 
     { 
      month: "Dec", 
      cost: 10, 
      energy: 20 
     }, 
    ]; 

Wie kann ich zeigen, dies als eine einfache Balkendiagramm auf meiner Website?

• Y-Achse als eine Skala von Zahlen für Kosten/Energie
• X-Achse des Monat

Ich habe einen Versuch, dies im Anschluss an eine Führung zu rein verwenden CSS und Javascript jedoch die Lösung Anzeige hatte ist unglaublich einfach und zeigt mir immer nur eine Datenzeile (dh Kosten oder Energie in einem Monat). Hier

ist ein exmple von dem, was ich versucht habe: HTML

<ul class="chart" style="width:{{width}}px; height:{{height}}px;" > 
     <div class="y" style="width:{{height}}px;">{{yAxis}}</div> 
     <div class="x">{{xAxis}}</div> 
     <li ng-repeat="bar in data" class="bar" style="height:{{bar.cost/max * height}}px; width:{{width/data.length - 5}}px; left:{{$index/data.length * width}}px;"><span>{{bar.month}}:{{bar.cost}}</span></li> 
    </ul> 

Controller:

$scope.width = 600; 
    $scope.height = 400; 
    $scope.yAxis = "Amount"; 
    $scope.xAxis = "Month"; 
    $scope.data = dataService.usage; 
    $scope.max = dataService.max; 
// Dataservice is a factory which returns the aformentioned JSON 

CSS:

.chart { 
    border-left: 1px solid black; 
    border-bottom: 1px solid black; 
    margin: 60px auto; 
    position: relative; 
} 

.y { 
    position: absolute; 
    transform: rotate(-90deg); 
    transform-origin: bottom left; 
    bottom: 0; 
    padding: 5px; 
} 

.x { 
    position: absolute; 
    top: 100%; 
    width: 100%; 
    padding: 5px; 
} 

.bar { 
    background: blue; 
    position: absolute; 


bottom: 0; 
} 

Dieser Ansatz auf der Seite schrecklich aussieht und die Die Y-Achse wird ebenfalls nicht korrekt angezeigt.

Gibt es eine bessere Methode, um meine Daten in Angular anzuzeigen?

Answer 1

Sie könnten dafür einen charting library verwenden.