изменение графика графика диаграммы

Question

Я использую график диаграммы, а цвета определены на уровне фреймворка, но мне нужно изменить его для конкретного графа, поэтому я не могу изменить уровень работы фрейма, попытался создать a. меньше файлов, но все же изменения не отражают.

Есть ли какой-либо другой способ изменения цвета гистограммы, и если я добавлю больше баров, цвета должны быть разными.

PS: ссылка для работы с рамкой для чартиста. https://github.com/capitalone/Hygieia/tree/master/UI/src/app/chartist

изменение цвета должны быть сделаны в https://github.com/capitalone/Hygieia/blob/master/UI/src/components/widgets/build/build.less

написал кусок кода, заданного в файле .less, но это не отражает ... какие входы пожалуйста.

.ct-series-a .ct-bar { 
    stroke: white; 
    stroke-width: 20px; 
} 
.ct-series-b .ct-bar { 
     stroke: blue; 
     stroke-width: 20px; 
    } 

Благодаря

Answer 1

less файлы не CSS, они должны быть собраны в CSS. Get any compiler on github или at lesscss.org.

Answer 2

Я знаю, что этот ответ может быть довольно поздним, но я нашел решение для скрипта java от this link. Он показывает, как вы можете динамически окрашивать разные компоненты.

var chart = new Chartist.Bar('#barChart', data, options, responsiveOptions); 
    chart.on('draw', function(context) { 


     if(context.type === 'bar') { 
     context.element.attr({ 
      style: 'stroke: red' 
     }); 
     }else if(context.type === 'point') { 
      context.element.attr({ 
      style: 'stroke: blue' 
     }); 
     }else if(context.type === 'line') { 
      context.element.attr({ 
      style: 'stroke: green' 
     }); 
     } 
    }); 

Answer 3

Я просто установил группу css (меньше) для каждой диаграммы.

.profit-chart { 
    .ct-series-a { 
     .ct-area { 
      fill: #158BE9; 
     } 

     .ct-bar, .ct-line, .ct-point, .ct-slice-donut { 
      stroke: #158BE9; 
     } 
    } 

    .ct-series-b { 
     .ct-area { 
      fill: #73b5eb; 
     } 

     .ct-bar, .ct-line, .ct-point, .ct-slice-donut { 
      stroke: #73b5eb; 
      /*stroke-dasharray: 5px;*/ 
     } 
    } 

    .ct-series-c { 
     .ct-area { 
      fill: #f28e2b; 
     } 

     .ct-bar, .ct-line, .ct-point, .ct-slice-donut { 
      stroke: #f28e2b; 
     } 
    } 
}