Chartist JS 颜色系列用于图例

Question

我目前正在使用 chartist-legend-plugin 它很棒，但是当涉及到图例的颜色时，它不起作用。有谁知道如何在chartist中抓取颜色系列？因为 chartist 会自动生成不同的颜色，当然插件没有它

JS：

    new Chartist.Bar('.ct-chart-bar', {
    labels: ['First quarter of the year', 'Second quarter of the year', 'Third quarter of the year', 'Fourth quarter of the year'],
    series: [
        { "name": "Money A", "data": [60000, 40000, 80000, 70000] },
        { "name": "Money B", "data": [40000, 30000, 70000, 65000] },
        { "name": "Money C", "data": [8000, 3000, 10000, 6000] }
    ],
},  {
    fullWidth: true,
    chartPadding: {
        top: 40
    },
    high : 100000,
    plugins: [
        Chartist.plugins.legend(),
    ]
});

CSS:

.ct-legend {
    position: relative;
    z-index: 10;

    li {
        position: relative;
        padding-left: 23px;
        margin-bottom: 3px;
    }

    li:before {
        width: 12px;
        height: 12px;
        position: absolute;
        left: 0;
        content: '';
        border: 3px solid transparent;
        border-radius: 2px;
    }

    li.inactive:before {
        background: transparent;
    }

    &.ct-legend-inside {
        position: absolute;
        top: 0;
        right: 0;
    }

    @for $i from 0 to length($ct-series-colors) {
        .ct-series-#{$i}:before {
            background-color: nth($ct-series-colors, $i + 1);
            border-color: nth($ct-series-colors, $i + 1);
        }
    }

HTML数据持有者：

<div class="ct-chart ct-chart-bar ct-perfect-fourth"></div>

它的所有资源都来自我收录的link。我是图表师的新手，这就是为什么我不能仅仅修改他们正在使用的东西。非常感谢大家！

编辑：

我认为 css 试图抓住这个系列的颜色，但不幸的是它不能。

Answer 1

我认为您已经解决了这个问题，但对于正在寻找解决方案的其他人来说。 CSS 基本上不是 CSS 而是 SCSS/SASS。样式包括使用变量 $ct-series-colors 的循环。该变量必须通过 @import "chartist-settings"; 从 _chartist-settings.scss 文件导入，或者如果您使用的是默认颜色集，则只需复制并粘贴以下列表即可。只为SCSS/SASS不纯CSS!

$ct-series-colors: (
        #d70206,
        #f05b4f,
        #f4c63d,
        #d17905,
        #453d3f,
        #59922b,
        #0544d3,
        #6b0392,
        #f05b4f,
        #dda458,
        #eacf7d,
        #86797d,
        #b2c326,
        #6188e2,
        #a748ca
) !default;

Chartist JS 颜色系列用于图例

Chartist JS color series using for legends

javascript

css

jquery

chartist.js