javascript - How to use custom legends in NVD3 charts - Stack Overflow

admin管理员组

文章数量:1418659

I am using an NVD3 line chart.

The chart by default renders legends which are clickable.

I want to build a custom legend using <ul> and <li> elements; clicking these <li>s should toggle their respective line series on the chart.

$(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;
    });
});

Plunker for full demo.

I am using an NVD3 line chart.

The chart by default renders legends which are clickable.

I want to build a custom legend using <ul> and <li> elements; clicking these <li>s should toggle their respective line series on the chart.

$(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;
    });
});

Plunker for full demo.

• javascript
• nvd3.js

Share Improve this question Follow edited Nov 12, 2015 at 3:20 approxiblue 7,1221616 gold badges5252 silver badges5959 bronze badges asked Nov 1, 2015 at 12:09 PradeepPradeep 1,27211 gold badge1919 silver badges3838 bronze badges 1

• Can you please add code over the fiddle so will help you – Mitul Commented Nov 4, 2015 at 6:48

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

To disable the legend chart.showLedgend(false). More details on how the entire code looks here.

Assuming you have a global instance of your chart, you need to change the state of the chart.

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

This works for me:

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

本文标签： javascriptHow to use custom legends in NVD3 chartsStack Overflow