javascript - Chartjs 图例样式

Question

我正在尝试为我的 Chartjs 图例设置样式，但出于某种原因，它不允许我覆盖字体颜色。我想将字体颜色更改为白色，同时保留条形图中每个元素的颜色，然后我希望它们水平显示，而不是像这样:

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;

}

这是目前的样子:

Answer 1

您需要设置 ul 的样式以删除元素符号点(并设置颜色)，并且需要使 li 内联。这应该为你做这个

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

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

请注意，如果您有针对相同元素的其他 CSS，您可能需要更多的特异性或样式重置。

---

fiddle - http://jsfiddle.net/bseccq9v/