在條形圖中呈現數據AngularJS，如何製作一個好的多條形圖表？

Question

假設我有波紋JSON：

[ 
     { 
      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 
     }, 
    ]; 

我怎麼能證明這是在我的網站一個簡單的條形圖？

• Y軸爲顯示當月號碼的成本/能量
• X軸的規模

我有這個企圖以下指導，以純粹使用CSS和Javascript然而，該解決方案是非常基礎的，並且一次只能顯示一個數據欄（即一個月的成本或能量）。

這裏是什麼，我都試過
的一個實例： 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> 

控制器：

$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; 
} 

這種方法看起來可怕的頁面和上Y軸也沒有正確顯示。

有沒有更好的方法來顯示我的數據在Angular中？

Answer 1

您可能需要爲此使用charting library。