如何在NVD3图表中使用自定义图例

Question

我使用的是NVD3折线图。

默认情况下，图表会呈现可点击的图例。

我想使用<ul>和<li>元素构建自定义图例;点击这些<li>应该在图表上切换各自的系列。

$(function(){
    nv.addGraph(function() {
        var dayChart = nv.models.lineChart()
            .options({
                transitionDuration: 300,
                useInteractiveGuideline: true,
                interpolate: 'monotone'
            });

        dayChart.xAxis
            .axisLabel('Time')
            .tickValues([0, 1, 2, 3, 4])
            .tickFormat(function(d){
                return ["", "0-6", "6-12", "12-18", "18-24"][d]
            });

        dayChart.yAxis
            .axisLabel('Engagement')
            .tickFormat(function(d) {
                if (d == null) {
                    return 'N/A';
                }
                return d3.format(',d')(d);
            })
        ;

        var data = [
                {"values": [
                    { "x": 0 ,"y": 3 }, { "x": 1 ,"y": 5 }, { "x": 2 ,"y": 2 }, { "x": 3 ,"y": 4 }, { "x": 4 ,"y": 2 }],    "key": "Desktop","color":"#4b758d"
                }
                ,
                {"values": [
                    { "x":  0 ,"y": 1 },    { "x": 1 ,"y": 3 }, { "x": 2 ,"y": 4 }, { "x": 3 ,"y": 3 }],    "key": "Mobile","color":"#99c925"                },
                {"values": [
                    { "x": 0  ,"y": 2 },{"x": 1  ,"y": 4 }, { "x": 2 ,"y": 3 }, { "x": 3 ,"y": 5 }],"key": "Tablet","color":"#f23b71"                }
            ];

        d3.select('#line-chart').append('svg')
            .datum(data)
            .call(dayChart);

        nv.utils.windowResize(dayChart.update);

        return dayChart;
    });
});

普通人demo。

Answer 1

禁用图例chart.showLedgend(false)。有关entire code looks here。

的详细信息

假设您有一个图表的全局实例，则需要更改图表的状态。

$(document).on('click', '#myButton', function(){
    chart.dispatch.changeState('key');
    chart.update();
});

Answer 2

这对我有用：

$(document).on('click', '#button', 
    function(){
        var state = chart.state;
        state.disabled[idOfItemInLegend] = !state.disabled[idOfItemInLegend];
        chart.dispatch.changeState(state);
        chart.update();
    }
);