棒グラフでデータを表示する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 
     }, 
    ]; 

がどのように私は、これは私のウェブサイト上の単純な棒グラフとして表示することができますか？月表示、コスト/エネルギーのための数字

X軸のスケールとして

• Y軸は

私は純粋しかし、解決策をCSSとJavascriptを使用するためのガイドを以下、この時の試みがありました信じられないほど基本的なものであり、一度に1つのデータバー（つまり、月間のエネルギーコストまたはエネルギー）を表示するだけです。ここで

は、私が試したもののexmpleです： 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軸も正しく表示されません。

私のデータを角度で表示する方がいいですか？

Answer 1

これにはcharting libraryを使用します。