图表js通过buttonClick在运行时显示/隐藏图例

Question

您好我想通过单击按钮来显示/隐藏我的折线图（chart.js）的图例。

我想这个至今：

下面的代码改变scatterChart.legend.options.display的价值，但到初始值自动执行scatterChart.update（）的值更改后！

function showHideLegend() { 
    console.log(scatterChart.legend.options.display); // -> "inital-value" e.g.: true 
    if (scatterChart.legend.options.display == true) { 
     scatterChart.legend.options.display = false; 
    } else { 
     scatterChart.legend.options.display = true; 
    } 
    console.log(scatterChart.legend.options.display); // -> value successfully changed e.g.: false 
    scatterChart.update(); 
    //Chart.defaults.global.legend.display = false;  // <- does not have an effect 
    console.log(scatterChart.legend.options.display); // -> "inital-value" e.g.: true 
} 

function initMap() { 
    scatterChart = new Chart(document.getElementById("scatterChart"), { 
     type: 'line', 
     data: { 
      /*datasets: [ 
      ] 
      */ 
     }, 
     showScale: false, 
     options: { 
      legend: { 
       position: 'right', 
       labels: { 
        fontSize: 15 
       } 
      } 
     } 
    }); 

HTML

<canvas id="scatterChart" style="width: 1920px; height: 1080px; background-image:url('image.jpg'); background-size: 100% 100%;"></canvas> 
<div id="scatterLegend"> //howToPutLegendHere??// </div> 
<input type="button" value="Show/Hide Legend" onclick="showHideLegend()"> 

Answer 1

看起来你只是想更新chart.js实例对象中错误的图例配置。这是正确的方法。

document.getElementById('hideLEgend').addEventListener('click', function() { 
    // toggle visibility of legend 
    myLine.options.legend.display = !myLine.options.legend.display; 
    myLine.update(); 
}); 

您试图更新的东西（例如chart.legend.options）就是传说默认配置对象。这会与您在图表options.legend配置中定义的任何选项合并。

这是一个codepen example显示按钮点击图例显示/隐藏行为。

您也可以选择不使用内置的图例，并在您的页面上的任何位置生成您的图例为纯HTML/CSS，然后使用jQuery（或标准javascript）来显示和隐藏。我不会提供展示/隐藏的示例（请参阅jQuery's show/hide functions），但我将演示如何生成自定义图例。首先，您需要使用options.legendCallback选项来创建生成自定义图例的功能。

options: { 
    legend: { 
    display: false, 
    position: 'bottom' 
    }, 
    legendCallback: function(chart) { 
    var text = []; 
    text.push('<ul class="' + chart.id + '-legend">'); 
    for (var i = 0; i < chart.data.datasets.length; i++) { 
    text.push('<li><div class="legendValue"><span style="background-color:' + chart.data.datasets[i].backgroundColor + '">&nbsp;&nbsp;&nbsp;&nbsp;</span>'); 

    if (chart.data.datasets[i].label) { 
     text.push('<span class="label">' + chart.data.datasets[i].label + '</span>'); 
    } 

    text.push('</div></li><div class="clear"></div>'); 
    } 

    text.push('</ul>'); 

    return text.join(''); 
    } 
} 

然后使用.generateLegend()原型方法以产生模板（其执行上面定义的legendCallback功能），并将其插入到DOM。

$('#legend').prepend(mybarChart.generateLegend()); 

这是演示自定义图例方法的codepen example。您可以修改legendCallback函数，以便为图例结构使用任何HTML，然后使用标准CSS对其进行设置。最后，使用javascript来显示/隐藏按钮点击。

Answer 2

你尝试把它放在一个div和隐藏/用CSS显示呢？它会存在但隐藏，并且update（）将更改现有数据，所以当你需要时，只需删除“hidden”类即可。