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>

即使是 span 样式也有它在页面中以这种方式显示的背景颜色：

城市发展局市政秘书处

沙特阿拉伯市政局

SETOR DE RH

SECRETARIA MUNICIPAL DE CULTURA、TURISMO、ESPORTE E LAZER

SETOR DE CADASTRO DE IMOVEIS

SECRETARIA MUNICIPAL DE DESENVOLVIMENTO ECONÔMICO, TRABALHO E MEIO AMBIENTE

SETOR AGILIZA

如何在 HTML 中显示在 span 样式标签中传递的颜色？

我也试过这样做，但我不明白如何让它工作（

谢谢你的时间！

更新 1

正如@Quince 指出的那样，我需要更改该函数提供给我的“1-图例”

要删除我使用的 class 名称的 1-legend

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

Answer 1

这可以通过一些css来实现。首先，尽管您 css class 1-legend 无效，css class 名称不能以数字开头 (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>

Answer 2

.legend {
    margin-top: 30px;

    ul {
        list-style: none;
        padding: 0;

        li {
            padding-left: 28px;
            position: relative;
            font-size: 28px;
            font-weight: 600;

            span {
                width: 20px;
                height: 20px;
                position: absolute;
                left: 0px;
                top: 3px;
                border-radius: 50%;
            }
        }
    }
}

此外，您可以通过以下方式将 ul 粘贴到您自己的结构中：

document.getElementById('name-of-your-element').innerHTML = myBarChart.generateLegend();

generateLegend() Chart.JS V2

generateLegend() Chart.JS V2

dom

chart.js

legend-properties