sencha Touch 图表：将渐变颜色应用于线条填充答案

【问题标题】：sencha Touch chart: Applying gradient color to line fillsencha Touch 图表：将渐变颜色应用于线条填充
【发布时间】：2012-02-02 13:14:47
【问题描述】：

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

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

【问题讨论】：

与sencha论坛上的问题相同； sencha.com/forum/…。米切尔告诉你用 CSS 试试这个？！
在哪里尝试 css 我尝试了很多但没有通过............:(

标签： sencha-touch sencha-touch-2 sencha-charts

【解决方案1】：

查看这篇文章：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

【讨论】：