sencha触摸图:将渐变颜色应用于线条填充

时间:2012-02-02 13:14:47

标签: sencha-touch sencha-touch-2 sencha-charts

我正在开发包含不同折线图的移动应用程序。我一直在尝试将渐变颜色应用于线条(单个)图表填充颜色。但不幸的是我不能。

是否可以将颜色渐变应用于线条填充颜色?请帮忙。

1 个答案:

答案 0 :(得分:0)

查看此文章:http://www.sencha.com/learn/learning-sencha-touch-charts/

使用SASS进行样式设计:

chart {
  colors:   linear-gradient(45, rgb(212, 40, 40), rgb(117, 14, 14))
            linear-gradient(45, rgb(180, 216, 42), rgb(94, 114, 13))
            linear-gradient(45, rgb(43, 221, 115), rgb(14, 117, 56))
            linear-gradient(45, rgb(45, 117, 226), rgb(14, 56, 117))
            linear-gradient(45, rgb(187, 45, 222), rgb(85, 10, 103));

  background: linear-gradient(45, #444, #111);

  series {
    stroke-width: 2;

    &:nth-child(1) {
      fill: linear-gradient(0, rgb(212, 40, 40), rgb(117, 14, 14));
    }
    &:nth-child(2) {
      fill: linear-gradient(0, rgb(180, 216, 42), rgb(94, 114, 13));
    }
    &:nth-child(3) {
      fill: linear-gradient(0, rgb(43, 221, 115), rgb(14, 117, 56));
    }
    &:nth-child(4) {
      fill: linear-gradient(0, rgb(45, 117, 226), rgb(14, 56, 117));
    }
    &:nth-child(5) {
      fill: linear-gradient(0, rgb(187, 45, 222), rgb(85, 10, 103));
    }
  }

  axis {
    stroke: #555;
    fill: #555;

    label {
      fill: #eee;
    }

    title {
      fill: #eee;
    }
  }
}

另请注意此帖子:Sencha Touch Charts style