angularjs - 堆积条形图+折线图角度库

Question

是否有任何 angularjs 库可以绘制带有堆积条+线的图表？像这样：

我正在寻找任何支持这个的库，带有角度指令。我找到了支持多图表（组合图表类型）的 angular-nvd3-directives，但我认为它不支持条形堆叠，仅支持分组。

我知道这些问题不太适合 SO，我正在寻找 ANY、ONE、lib，而不是建议。（也必须免费用于商业用途）

Answer 1

ZingChart -AngularJS指令公开了支持混合图表的整个 ZingChart 库。它可以免费用于商业用途。我在 CodePen 上做了一个你正在寻找的演示。

这是您的 JS 的样子：

var app = angular.module('myApp', ['zingchart-angularjs']);

app.controller('MainController', function($scope) {
  $scope.myJson = {
    "type": "mixed",
    "background-color": "white",
    "plot": {
      "stacked": true
    },
    "series": [{
      "type": "bar",
      "values": [25, 30, 15, 20, 25],
      "stack": 1,
      "background-color": "#4372c1",
      "hover-state": {
        "visible": false
      },
    }, {
      "type": "bar",
      "values": [20, 10, 30, 25, 15],
      "stack": 1,
      "background-color": "#ea4204",
      "hover-state": {
        "visible": false
      },
    }, {
      "type": "line",
      "values": [25, 30, 15, 20, 25],
      "line-color": "#38408c",
      "marker": {
        "background-color": "#38408c",
        "border-color": "#38408c"
      },
      "hover-state": {
        "visible": false
      }

    }, {
      "type": "line",
      "values": [25, 30, 15, 20, 25],
      "line-color": "#38408c",
      "marker": {
        "background-color": "#38408c",
        "border-color": "#38408c"
      },
      "hover-state": {
        "visible": false
      },
    },]
  };
});

Answer 2

angular-nvd3 支持这一点。你所要做的就是设置bars1.stacked=true 和bars2.stacked=true

http://plnkr.co/edit/2gSaYHgNkuNjbj9SGrWt?p=preview

$scope.options = {
  chart: {
    type: 'multiChart',
    ...
    bars1: {stacked:true},
    bars2: {stacked:true},
    ...
    };
  }
}