帶有使用c3角度指令的區域的折線圖

Question

我正在創建一個角度應用程序，我使用C3-angular-directive來顯示我的數據。目前我正在以基本折線圖顯示數據。從原始數據中預測未來值，並且我想通過使用虛線（或類似）在圖中顯示這些預測值。

是否可以使用C3角度指令創建line chart with regions？

Answer 1

我在一個專業項目中使用Angular和C3js庫。

我沒有測試過C3-角指令，但如果你看看在現場，它說：

的最常用的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）重繪圖表當數據被改變+解析工具提示錯位。