전설에 사용하는 Chartist JS color series

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> 

을 모든 리소스는 내가 포함 된 링크에서 왔습니다. 나는 chartist의 초심자이기 때문에 그들이 사용하고있는 것들을 수정할 수있는 것이 아닙니다. 모두에게 고마워!

편집 :

나는 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;