Question

我目前正在使用chartist-legend-plugin它很棒但是当涉及到传说的颜色时它无法正常工作。有谁知道如何在图表中获取一系列颜色？因为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>

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

编辑：

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

Answer 1

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

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

Chartist JS彩色系列用于传说

1 个答案: