在条形图中呈现数据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。