Sencha touch 2图表：在特定范围上绘制线

Question

是否可以在给定范围内显示某些线形图系列？例如。我有两条线，橙色占据所有的情节（x轴是基于它的值），但我想要一个绿色的结束“12”值。

我试图从绿线删除数据，但它并没有帮助。

Answer 1

哈克解决方案是这样的：

改变线的颜色为灰色（同背景颜色）一旦某些条件fullfilled。 在下面的例子中，我假设背景颜色是#eeeeee。

首先创建一些单UTIL：

Ext.define('Company.util.Factory', { 
    singleton: true, 
    generateChartLineSerieRenderer:function(input, color){ 
     var result = function (sprite, config, rendererData, index) {return {}}; 

     // color should be the same as color of your chart's background 
     color = color || 'white'; 

     // check if input is defined, if not then it should use default configuration 
     input = input || { 
          field  :'x', 
          action  :'lt', 
          actionValue : 12 
         } 

     switch(input.action){ 
     case "lt": 
      result = function (sprite, config, rendererData, index) { 
      if(rendererData.store.getData().items[index].data[input.field] < input.actionValue){ 
       return { strokeStyle: color }; 
      } 
      } 
      break; 

     case "gt": 
      result = function (sprite, config, rendererData, index) { 
      if(rendererData.store.getData().items[index].data[input.field] > input.actionValue){ 
       return { strokeStyle: color }; 
      } 
      } 
      break; 
     } 
    } 

    return result; 
}); 

以上功能Factory.generateChartLineSerieRenderer将返回功能，这将改变线条的颜色，如果某些条件将满足。

您可以使用它像这样：

series: [ 
    { 
     type: 'line', 
     title: "Line Orange", 
     xField: "x", 
     yField: "y1", 
     style: { 
      stroke: "orange" 
     }, 
    }, 
    { 
     type: 'line', 
     title: "Line green", 
     xField: "x", 
     yField: "y2", 
     style: { 
      stroke: "green" 
     }, 
     renderer: Company.util.Factory.generateChartLineSerieRenderer(
         { 
          field  :'x', 
          action  :'gt', 
          actionValue : 12 
         }, 
         "#eeeeee" 
       ) 
    } 
],