Заменить легенду на графе c3.js

Question

Я пытаюсь заменить стандартную легенду c3 новыми элементами управления из углового материала. Пожалуйста, взгляните на jsfiddle

Под графом есть легенда c3 по умолчанию, которую я хочу заменить с помощью элементов управления над графиком. Любые идеи, как это сделать? Спасибо.

var myApp = angular.module('myApp', ['ngMaterial']); 

myApp.controller('myCtrl', function ($scope) { 
    $scope.data = { 
     data1: true, 
     data2: true 
    } 

    $scope.chart_grid_lines = c3.generate({ 
     bindto: '#chart1', 
     data: { 
      columns: [ 
       ['data1', 30,200,100,400,150,250], 
       ['data2', 50,20,10,40,15,25] 
      ] 
     } 
    }); 
}); 

Answer 1

Вы можете установить ng-change в функцию как так

<md-switch class="md-secondary" ng-model="data.data1" aria-label="Switch 1" ng-change="updateChart()"> 

updateChart() будет смотреть на $scope.data и использовать C3 API, чтобы скрыть/показать серию, как так

$scope.updateChart = function() { 
    if ($scope.data.data1) 
     $scope.chart_grid_lines.show(['data1']); 
    else 
     $scope.chart_grid_lines.hide(['data1']); 

    if ($scope.data.data2) 
     $scope.chart_grid_lines.show(['data2']); 
    else 
     $scope.chart_grid_lines.hide(['data2']); 
} 

Вы может также хотеть скрыть легенду С3, используя legend.show

---

Fiddle - http://jsfiddle.net/db2Lgs7x/