Chartjs图例样式 [英] Chartjs Legend Styling

问题描述

我试图风格我的Chartjs传奇，但由于某种原因，它不允许我重写字体颜色。我想将字体颜色更改为白色，同时保留条形图中每个项目的颜色，然后我想要他们水平显示，像这样：

I am trying to to style style my Chartjs legend but for some reason it is not allowing me to override the font color. I want to change the font color to white while retaining the colors for each item in the bar chart, and then I want them to be displayed horizontally instead like this:

index.html

<div id="title"></div>
<div id="content">
</div>
<div>
    <canvas id="myChart" style="width: 100%; height: auto;"></canvas>
</div>
<div id="js-legend" class="chart-legend"></div>

CSS

 .chart-legend  li span{
    color: red !important;
    display: block;
    width: 12px;
    height: 12px;
    margin-right: 5px;
    list-style-type: none !important;

}

strong>

This is how it currently looks:

推荐答案

c $ c> ul 删除项目符号（并设置颜色），您需要使 li 内联。这应该为你

You need to style your ul to remove the bullet points (and set the color) and you need to make your li inline. This should do this for you

.chart-legend ul {
    list-style: none;
    background: black;
    color: white;
}

.chart-legend li {
    display: inline-block;
}

请注意，如果您有额外的CSS定位相同的元素，特殊性或样式重置。

Note that if you have additional CSS that targets the same elements you might need more specificity or style resets.

小提琴 - http://jsfiddle.net/bseccq9v/

这篇关于Chartjs图例样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！