dom - generateLegend() Chart.JS V2

Question

我正在尝试自定义我的图例

我正在使用 .generateLegend() 以 html 方式获取图例

这就是函数给我的

console.log(myBarChart.generateLegend());

<ul class="1-legend"><li><span style="background-color:#006666"></span>SECRETARIA MUNICIPAL DE DESENVOLVIMENTO URBANO </li>
    <li><span style="background-color:#339966"></span>SECRETARIA MUNICIPAL DE SAUDE</li>
    <li><span style="background-color:#3366ff"></span>SETOR DE RH</li>
    <li><span style="background-color:#66ccff"></span>SECRETARIA MUNICIPAL DE CULTURA, TURISMO, ESPORTE E LAZER </li>
    <li><span style="background-color:#ffcc66"></span>SETOR DE CADASTRO DE IMOVEIS</li>
    <li><span style="background-color:#ff6666"></span>SECRETARIA MUNICIPAL DE DESENVOLVIMENTO ECONÔMICO, TRABALHO E MEIO AMBIENTE</li>
<li><span style="background-color:#994d00"></span>SETOR AGILIZA</li></ul>

即使是跨度样式也有背景颜色，它在页面中显示如下:

城市发展秘书处

沙特市政秘书处

塞托·德·RH

市文化、旅游、激光体育秘书处

SETOR DE CADASTRO DE IMOVEIS

市经济发展局、TRABALHO E MEIO AMBIENTE

SETOR AGILIZA

如何在 HTML 中显示跨度样式标记中传递的颜色？

我也尝试这样做，但我不明白如何让它工作( Custom Legend with ChartJS v2.0)

感谢您的宝贵时间!

更新1

正如 @Quince 指出的，我需要更改该函数给我的“1-legend”

删除我使用的类名的 1 个图例

var s = myBarChart.generateLegend().replace(/\"1-legend"/g, 'legend');

Answer 1

这可以通过一些CSS来实现。首先，虽然你的 css 类 1-legend 无效，但 css 类名不能以数字开头 ( good explanation on what is allowed here )

但是一旦解决了这个问题，您就可以设置您想要显示的跨度样式，这里是一个示例

.legend {
  list-style: none;
}

.legend li span {
  width: 10px;
  height: 10px;
  display: inline-block;
  margin-right: 10px;
  border-radius: 10px;
}

<ul class="legend">
  <li><span style="background-color:#006666"></span>SECRETARIA MUNICIPAL DE DESENVOLVIMENTO URBANO </li>
  <li><span style="background-color:#339966"></span>SECRETARIA MUNICIPAL DE SAUDE</li>
  <li><span style="background-color:#3366ff"></span>SETOR DE RH</li>
  <li><span style="background-color:#66ccff"></span>SECRETARIA MUNICIPAL DE CULTURA, TURISMO, ESPORTE E LAZER </li>
  <li><span style="background-color:#ffcc66"></span>SETOR DE CADASTRO DE IMOVEIS</li>
  <li><span style="background-color:#ff6666"></span>SECRETARIA MUNICIPAL DE DESENVOLVIMENTO ECONÔMICO, TRABALHO E MEIO AMBIENTE</li>
  <li><span style="background-color:#994d00"></span>SETOR AGILIZA</li>
</ul>