Chartist JSカラーシリーズは伝説に使用

Question

私は現在chartist-legend-pluginを使用していますが、それは素晴らしいですが、それは伝説の色になると動作していません。誰もカルテリストの色をつかむ方法を知っていますか？

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> 

チャーティストが自動的に異なる色を生成しますが、もちろん、プラグインがそれ

JSを持っていないため、すべてのリソースは、私が含んでいるリンクから来ました。私はchartistの初心者ですから、私が使っているものを修正するだけではいけません。みんなありがとう！

EDIT：

私はCSSは一連の色をつかむしようとしていると思いますが、それは残念ながらできません。

Answer 1

あなたは既にこの問題を解決していると思いますが、解決策を探している他の人はそうです。 CSSは基本的にCSSではなく、SCSS/SASSです。スタイルは変数$ct-series-colorsを使用するループを含みます。変数は_chartist-settings.scssファイルから@import "chartist-settings";経由でインポートする必要があります。また、デフォルトの色セットを使用している場合は、次のリストをコピーして貼り付けることもできます。 純粋なCSSでないSCSS/SASSの場合のみ！

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