1

我正在使用图表师图表，颜色是在框架级别定义的，但我需要为特定图表更改它，所以我无法在框架工作级别进行更改，尝试创建一个 .less 文件，但更改仍然是不反映。

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

PS：chartist 框架更改的链接。 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;
    }

谢谢

4

3 回答 3

2

我知道这个答案可能已经很晚了，但我从这个链接中找到了一个 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-08T06:12:43.130 回答
1

我只是为每个图表设置了一组 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-18T12:51:45.847 回答
0

less文件不是css，需要编译成css。在 github或lesscss.org上获取任何编译器。

于 2016-02-28T16:56:50.717 回答