替换 c3.js 图上的图例

Question

我正在尝试用 Angular Material 中的新控件替换默认的 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']);
}

您可能还想使用 legend.show

隐藏 C3 图例

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

替换 c3.js 图上的图例

Replace legend on the c3.js graph

angularjs

d3.js

angular-material

c3.js