javascript - 图表js在运行时通过按钮单击显示/隐藏图例

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()原型(prototype)方法生成模板(执行上面定义的legendCallback函数)并将其插入到DOM中。

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

这是一个codepen example这演示了自定义图例方法。您可以修改 legendCallback 函数以使用您想要的图例结构的任何 HTML，然后使用标准 CSS 对其进行样式设置。最后，使用 JavaScript 在按钮单击时显示/隐藏它。