generateLegend()Chart.JS V2 [英] generateLegend() Chart.JS V2

问题描述

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

I´m trying to customize my legend

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

I´m using the .generateLegend() to get the legend in a html way

这就是函数给我的

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

市政文化，图里斯莫，体育乐

加泰罗尼亚·德莫伊维斯船长

世界经济发展组织秘书处，特拉巴洛·伊·梅奥·安比昂

SETOR AGILIZA

Even the span style has the background color it shows this way in page:

SECRETARIA MUNICIPAL DE DESENVOLVIMENTO URBANO

SECRETARIA MUNICIPAL DE SAUDE

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样式标记中传递的颜色?

How can i show the color passed in the span style tag in the HTML?

我也尝试过这种方法，但我不明白如何使其工作(

I tried to make this way too but i can´t understand how to get it work (Custom Legend with ChartJS v2.0)

感谢您的宝贵时间！

更新1

@Quince指出，我需要更改函数给我的"1-legend"

As @Quince pointed i need to change the '1-legend' that the function gave to me

要删除我使用的班级名称的第一个传说

To remove the 1-legend of class name i used

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

推荐答案

这可以通过一些CSS实现.首先，虽然您的CSS类1-legend无效，但是CSS类名称不能以数字开头(此处允许使用的内容的详细说明)

This can be achieved through some css. First thing though you css class 1-legend is not valid, css class names can not start with a number (good explanation on what is allowed here)

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

But once that is fixed you can just style the spans how you want to dispaly here is an example

.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>

这篇关于generateLegend()Chart.JS V2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！