堆积条形图+折线图角度库答案

【问题标题】：Stacked Bar + Line chart angular library堆积条形图+折线图角度库
【发布时间】：2016-02-22 19:35:25
【问题描述】：

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

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

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

【问题讨论】：

只需获取 highchart 并将 lib 包装到您自己的指令中即可。恕我直言，更简单、更有效的方式。或使用github.com/pablojim/highcharts-ng

标签： angularjs angularjs-nvd3-directives angular-nvd3

【解决方案1】：

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},
    ...
    };
  }
}

【讨论】：

【解决方案2】：

ZingChart-AngularJS 指令公开了支持混合图表的整个 ZingChart 库。它可以免费用于商业用途。 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
      },
    },]
  };
});

【讨论】：