charts - Sencha touch 2 图表：在特定范围内画线

Question

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

我尝试从绿线上删除数据，但没有帮助。

Answer 1

哈克解决方案是这样的：

一旦满足某些条件，将线的颜色更改为灰色（与背景颜色相同）。在下面的示例中，我假设背景颜色是#eeeeee。

首先创建一些单例实用程序：

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"
                  )
    }
],