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

Question

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

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

Answer 1

Hacky解决方案就是这样：

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

首先创建一些singleton 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"
                  )
    }
],