Линейная диаграмма с областями с использованием угловых директив c3

Question

Я создаю угловое приложение, где я использую C3-angular-directive, чтобы показать свои данные. В настоящее время я показываю данные в базовой линейной диаграмме. Из исходных данных прогнозируются будущие значения, и я хочу показать эти предсказанные значения на графике, используя пунктирные линии (или аналогичные).

Возможно ли создать line chart with regions с использованием угловой директивы C3?

Answer 1

Я использую Angular и C3js библиотеку в профессиональном проекте.

Я не тестировал C3-угловую директиву, но если вы посмотрите на сайте он говорит:

В наиболее часто используемые опционов c3js библиотеки доступны через директиву, а также.

Тогда я искал в library itself и нет никакого упоминания о «области» нигде в коде, так что я не думаю, что эта продвинутая настройка доступна.

Но на самом деле очень легко сделать свою собственную директиву с 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

EDIT: Я обновил директиву (в приведенном выше JSFiddle), чтобы перерисовать график, когда данные изменены + разрешение отклонение всплывающей подсказки.