ChartJS新手自定义独立图例报错求助

刚接触Chart.js的话，自定义独立图例确实容易踩一些小坑，我帮你排查下代码里的问题，然后给出修正后的完整方案：

首先梳理你的代码里的问题点 #

1. JS拼写错误：document.getElemenById少了一个t，正确写法是document.getElementById——这个错误会直接导致找不到图例容器，引发报错。
2. 多余语法符号：JS代码最后多了一个});，属于语法错误，会阻止代码执行。
3. CSS样式不完整：width: 10缺少单位px，图例的颜色块无法正常显示。
4. 缺少图例交互功能：默认生成的图例只是静态文本，没有点击切换系列显示/隐藏的实用功能，我帮你补上这部分。

修正后的完整代码 #

JS代码

// 修正拼写错误：getElementById
var myLegendContainer = document.getElementById('legend');
var graphTarget = $("#line-chartcanvas");
graphTarget.attr('height', 80);

// 初始化图表（确保chartdata已正确定义）
barGraphQty = new Chart(graphTarget, {
  type: 'bar',
  data: chartdata,
  options: {
    legend: { display: false }, // 隐藏默认内置图例
  }
});

// 将生成的图例插入指定容器
myLegendContainer.innerHTML = barGraphQty.generateLegend();

// 绑定图例点击事件，实现系列显示/隐藏切换
myLegendContainer.addEventListener('click', function(e) {
  if (e.target.tagName === 'LI') {
    var index = Array.from(e.target.parentElement.children).indexOf(e.target);
    var meta = barGraphQty.getDatasetMeta(index);
    // 切换系列的显示状态
    meta.hidden = meta.hidden === null ? !barGraphQty.data.datasets[index].hidden : null;
    // 更新图表
    barGraphQty.update();
    // 切换hidden类，配合CSS实现删除线效果
    e.target.classList.toggle('hidden');
  }
});

HTML代码（无需修改，保持原样即可）

<div class="col-md-4">
  <div class="box">
    <div class="box-header with-border">
      <h3 class="box-title">Legends</h3>
      <div class="box-tools pull-right">
        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
        <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
      </div>
    </div>
    <div class="box-body">
      <div id="legend"></div>
    </div>
  </div>
</div>

CSS代码（补充width单位）

[class$="-legend"] {
  list-style: none;
  cursor: pointer;
  padding-left: 0;
}
[class$="-legend"] li {
  display: block;
  padding: 0 5px;
}
[class$="-legend"] li.hidden {
  display:block !important;
  text-decoration: line-through !important;
}
[class$="-legend"] li span {
  border-radius: 5px;
  display: inline-block;
  height: 10px;
  margin-right: 10px;
  width: 10px; /* 补充px单位 */
}

额外提醒 #

请确保你的chartdata变量已经正确定义，包含图表所需的labels和datasets数据，比如：

var chartdata = {
  labels: ['一月', '二月', '三月'],
  datasets: [
    { label: '系列1', data: [10, 20, 30], backgroundColor: '#ff0000' },
    { label: '系列2', data: [15, 25, 35], backgroundColor: '#00ff00' }
  ]
};

内容的提问来源于stack exchange，提问作者ckien