带有使用 c3 角度指令的区域的折线图答案

【问题标题】：Line chart with regions using c3 angular directives带有使用 c3 角度指令的区域的折线图
【发布时间】：2015-07-28 12:04:23
【问题描述】：

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

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

【问题讨论】：

标签： javascript angularjs c3.js

【解决方案1】：

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

我没有测试过 C3-angular-directive 但是如果你看一下它说的网站：

c3js 库的最常用 选项也可以通过指令获得。

然后我在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 中）以在数据更改时重绘图表 + 解决工具提示错误定位。

【讨论】：

我认为图书馆目前还不可能。我将创建自己的指令。感谢您的回答以及如何完成的示例。
您知道为什么工具提示会放在图表下方吗？使用元素指令时似乎有问题。
其实没有。我用指令创建了很多图表，但没有一个遇到这个错误。如果我发现了什么，我会试着在我身边调查，并会在一周内回复你（我现在正在度假，没有电脑访问权限）。
好的，我解决了这个问题。这很容易。只需将显示设置为阻止您的图表指令。我还调整了更新算法，因为图表在第一次显示时被重新设计（首次加载指令时会触发 $watch 侦听器）。