替換c3.js圖上的圖例

我試圖用Angular Material中的新控件替換默認的c3圖例。請看jsfiddle 替換c3.js圖上的圖例

在圖下方有一個默認的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] 
      ] 
     } 
    }); 
});

來源

2015-09-14 corry

您可以設置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']); 
}

你也可能想要使用legend.show

來隱藏C3圖例

小提琴 - http://jsfiddle.net/db2Lgs7x/

來源

2015-09-14 12:00:32 potatopeelings

它只在第一次加載後才起作用。刷新（重新加載）瀏覽器窗口後，它不起作用（Chrome，Opera）：/可以使用$ watch功能跟蹤更改嗎？謝謝。 – corry

是的，這是可能的。如果您正在觀看數據，請確保您進行深入觀察 - http://jsfiddle.net/vog1cnv2/ – potatopeelings

替換c3.js圖上的圖例

回答

相關問題