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

我使用的是NVD3折线图

默认情况下，图表呈现可单击的图例

我想使用

和

元素构建一个自定义图例；单击这些

应在图表上切换其各自的线系列

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

$（函数（）{
nv.addGraph（函数（）{
var dayChart=nv.models.lineChart（）
.选项({
过渡期：300，
useInteractiveGuideline：对，
插入：“单调”
});
dayChart.xAxis
.axisLabel（“时间”）
.tickValue（[0,1,2,3,4]）
.d格式（函数（d）{
返回[“”、“0-6”、“6-12”、“12-18”、“18-24”][d]
});
dayChart.yAxis
.axisLabel（“约定”）
.d格式（函数（d）{
如果（d==null）{
返回“不适用”；
}
返回d3.format（'，d'）（d）；
})
;
风险值数据=[
{“价值观”：[
{“x:0，y:3}，{“x:1，y:5}，{“x:2，y:2}，{“x:3，y:4}，{“x:4，y:2}]，“键”：“桌面”，“颜色”：“4b758d”
}
,
{“价值观”：[
{“x:0，y:1}，{“x:1，y:3}，{“x:2，y:4}，{“x:3，y:3}]，“键”：“移动”，“颜色”：“#99c925”}，
{“价值观”：[
{“x:0，y:2}，{“x:1，y:4}，{“x:2，y:3}，{“x:3，y:5}]，“键”：“平板”，“颜色”：“#f23b71”}
];
d3.选择（“#折线图”）.append（'svg'））
.基准（数据）
.通话（日图）；
nv.utils.windowResize（dayChart.update）；
返回日图表；
});
});

---

完全按下按钮。

禁用图例

图表。showlegnd（false）

。更多关于如何使用的详细信息

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

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

这对我很有用：

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

---

你能在小提琴上加上密码吗？这样会对你有帮助的