使用 c3 angular 指令的带区域的折线图

Question

我正在创建一个 angular 应用程序，我在其中使用 C3-angular-directive 来显示我的数据。目前我在基本折线图中显示数据。根据原始数据预测未来值，我想使用虚线（或类似的）在图中显示这些预测值。

是否可以使用 C3 angular 指令创建 line chart with regions？

Answer 1

我在专业项目中使用 Angular 和 C3js 库。

我还没有测试过 C3-angular-指令，但是如果你看一下这个网站，它会说：

The most used options of the c3js library are available through the directive as well.

然后我在library itself中搜索，代码中没有任何地方提到'region'，所以我认为这个高级定制不可用。

但实际上使用 C3js 和 Angular 制作您自己的指令非常容易。

在你的 JS 中：

.directive('lineChart', function(){
    return {
        restrict: 'E',
        scope:{data:'='},
        link: function(scope, elem){
            var chart = c3.generate({
                bindto: elem[0],
                size: {
                    width:300,
                    height:200
                },
                data: scope.data
            });
        }
    };
});

在你的 HTML 中：

<line-chart data="myData"></line-chart>

在这里，您可以通过 data 属性将数据传递给您的图表指令。或者你可以像他们一样做并拆分数据指定 column-id 属性等...

working JSFiddle here

编辑：我更新了指令（在上面的 JSFiddle 中）以在数据更改时重绘图表 + 解决工具提示错位问题。

使用 c3 angular 指令的带区域的折线图

Line chart with regions using c3 angular directives

javascript

angularjs

c3.js