图表图形颜色变化

我正在使用图表图形，并且颜色是在框架级别中定义的，但我需要将其更改为特定图形，所以我无法在框架工作级别更改，试图创建一个。较少的文件，但仍然没有反映的变化。图表图形颜色变化

是否有任何其他选项如何更改条形图的颜色，如果我添加更多的酒吧，颜色应该是不同的。

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; 
    }

感谢

来源

2016-02-28 user1190615

less文件不是CSS，他们需要被编译成CSS。 Get any compiler on github或at lesscss.org。

来源

2016-02-28 16:56:50

我正在使用gulp并保存较少的文件后，是否希望在保存后运行gulp serve命令，但在我的命令窗口中显示文件已更改。 – user1190615

这是我的.less文件试图更改条形图颜色代码的代码。 012ctx \t'.ct-chart .ct-series .ct-series-a .ct-bar {' 'stroke：＃007f00;' '}' – user1190615

我知道这个答案可能相当晚，但我发现了一个来自this link的java脚本解决方案，它显示了如何动态地为不同的组件着色。

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' 
     }); 
     } 
    });

来源

2017-12-08 06:12:43 IsaacK

我只是为每个图表设置一组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; 
     } 
    } 
}

来源

2018-01-18 12:51:45 MartinC

图表图形颜色变化

回答

相关问题