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（）将对现有数据进行更改，因此当您需要它时，只需删除类＆＃34;隐藏＆＃34;。

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

2 个答案: