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。

在条形图AngularJS中呈现数据，如何制作一个好的多条形图？

1 个答案: