Chart js show/hide 图例在运行时通过 buttonClick

Question

您好，我想 show/hide 通过单击按钮来显示我的折线图 (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

你试过把它放在 div 和 hide/show 和 CSS 中吗？它会存在但隐藏并且 update() 将对现有数据进行更改，因此当您需要它时，只需删除 class "hidden".

Answer 2

您似乎只是想更新 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 显示按钮点击的图例 show/hide 行为。

您也可以选择不使用内置图例并在页面的任何位置生成纯 HTML/CSS 图例，然后使用 jQuery（或标准 javascript）来显示和隐藏。我不会提供 showing/hiding 的示例（请参阅 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 到 show/hide。

Chart js show/hide 图例在运行时通过 buttonClick

Chart js show/hide legend during runtime via buttonClick

javascript

legend

show-hide

chart.js