Sencha Touch图表风格 [英] Sencha Touch Charts style

问题描述

我正在玩Sencha Touch Charts。我有他们的工作，与互动，动画一切都很好。我甚至风格了一大堆。

但是当我碰到一系列类型的区域时，它只是不会。

  new Ext.chart.Chart（{
 theme：'MyTheme'，
 cls：'myClass'，
 legend：{...}，
互动：[{...}]，
 store：app.stores.MyStore，
 
轴：[...]，
 
系列：[{type：'area'，axis：'left'，xField：'Date'，yField：'someField'}，
 {type：'line'，axis：'right'，xField：'Date' ，yField：'someField2'} 
] 
}）
  

  chart [cls = myClass] {
 
系列{
& [type = area] {
 fill：＃FFA500; 
} 
 
& [type = line] {
 stroke：＃008000; 
 fill：＃008000; 
 marker {
 stroke：＃008000; 
 fill：＃008000; 
} 
} 
} 
} 
  

so线系列风格很好，但该区域不是：|任何想法？

解决方案

我没有实际尝试过，但看起来你几乎在...

根据 http://docs.sencha.com/touch-charts/1-0/#!/guide/touch_charts_styling （在axis - >label）

我会尝试：

  axis [position = bottom] {
 label { 
旋转：0 0 45; 
} 
} 
  

I'm playing with Sencha Touch Charts. I've got them working, with interactions, animation everything is good. I even styled a bunch of them.

But when I got around styling a series of type area.. it just wouldn't take.

new Ext.chart.Chart({
    theme: 'MyTheme',
    cls: 'myClass',
    legend: { ... },
    interactions: [{ ... }],
    store: app.stores.MyStore,

    axes: [...],

    series: [{ type: 'area', axis: 'left', xField: 'Date', yField: 'someField' },
             { type: 'line', axis: 'right', xField: 'Date', yField: 'someField2' }
    ]
})

and the style

chart[cls=myClass] {

series {
         &[type=area] {
             fill: #FFA500;
         }

      &[type=line] {
          stroke: #008000;
      fill: #008000;
      marker {
          stroke: #008000;
          fill: #008000;
      }
      }
    }
 }

so the line series is styled just fine, but the area is not :| Any idea?

解决方案

I've not actually tried this but it looks like you're almost there...

Based on the example found at http://docs.sencha.com/touch-charts/1-0/#!/guide/touch_charts_styling (at "axis" -> "label")

I'd try:

axis[position=bottom] {
      label {
          rotate: 0 0 45;
      }
  }

这篇关于Sencha Touch图表风格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！