堆积条+折线图角度库

Question

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

我正在寻找任何支持它的库,使用angular指令.我发现了angular-nvd3指令,支持多图(组合图表类型),但我不认为它支持条形堆叠,只支持分组.

我知道这些问题不太适合SO,我正在寻找任何,一个,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
      },
    },]
  };
});