Question

我正在使用图表图表并且颜色是在框架级别定义的，但我需要为特定图表更改它，因此我无法更改框架工作级别，尝试创建.less文件但仍然这些变化没有反映出来。

还有关于如何更改条形图颜色的其他选项，如果我添加更多条形图，颜色应该不同。

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

我知道这个答案可能已经很晚了但我找到了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'
        });
      }
    });

Answer 2

我只是为每个图表设置了一组css（less）。

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

Answer 3

less文件不是css，需要将它们编译成css。 Get any compiler on github或at lesscss.org。

图表颜色变化

3 个答案: