chartJS 生成图例（）答案

【问题标题】：chartJS generateLegend()chartJS 生成图例（）
【发布时间】：2020-11-29 01:10:33
【问题描述】：

我是使用图表 JS 的新手，我正在尝试自定义图例。我尝试了我找到的示例，但是当我尝试制作自己的示例时，它显示了此错误。

我想像这样单独显示图例。

这是我的代码。

var myLegendContainer = document.getElemenById('legend');
var graphTarget = $("#line-chartcanvas");
                    graphTarget.attr('height',80);
                        barGraphQty = new Chart(graphTarget, {
                        type: 'bar',
                        data: chartdata,
                        options: {
                            legend: {
                            display: false
                            },
                        }
                    });
                    
                    myLegendContainer.innerHTML = barGraphQty.generateLegend();
                    
                });

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

[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: 10

请帮帮我。

【问题讨论】：

标签： charts chart.js

【解决方案1】：

没有看到您的代码，几乎不可能知道为什么会出现这个TypeError。然而，从发布的图片中，我推断使用 generatelabels 并不是实现您所需要的理想选择。

您真正需要的是使用legendCallback 和一些CSS 生成自定义HTML legend。

请查看以下帖子，了解如何做到这一点：

【讨论】：