堆积条形图 + 折线图 angular 库

Question

有没有angularjs库可以画出堆叠条+线的图表？像这样：

我正在寻找任何支持此功能的库，带有 angular 指令。我发现 angular-nvd3-directives，它支持多图表（组合图表类型），但我认为它不支持条形堆叠，只支持分组。

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

Answer 1

ZingChart-AngularJS directive exposes the entire ZingChart library, which supports mixed charts. It's free for commercial use. I made a demo on CodePen of what you're looking for.

这是您的 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},
    ...
    };
  }
}

堆积条形图 + 折线图 angular 库

Stacked Bar + Line chart angular library

angularjs

angularjs-nvd3-directives

angular-nvd3