折线图未连接点（Sencha-Charts包）

Question

我遇到了extjs笛卡尔图表组件的问题，因为它无法在两点之间画一条线。我已经将问题缩小到缺少区间数据，但是没有找到一个好的解决方案。

在下面 - 简化 - 示例中，您将看到红线中断，其中蓝色线上的标记存在数据，间隔为“三” - 位于两个红色标记之间。我试图找到一种方法，在间隔为“两”的红色标记处直接绘制到间隔为“四”的标记，在这种情况下，只有部分数据存在于 1或更多步骤中系列。

在我的实时应用程序中，沿x轴的数据实际上是日期，因此在每个系列的每个间隔期望数据是不合理的。我也不愿意假点没有数据，因为标记有意义，我在点击事件上做了其他事情。

查看 API 我唯一的调查线似乎是重载了Series renderer函数但是到目前为止，我还没弄清楚是什么触发了抽奖，因为文档很少见最好。

如果有人已经解决了这个问题，我会在选择拆分框架之前提出任何建议吗？或者 - 健全性检查 - 我是否错过了一些明显的配置属性？

» please fiddle

Ext.create('Ext.Container', {
    renderTo: Ext.getBody(),
    width: 600,
    height: 400,
    layout: 'fit',
    items: {
        xtype: 'cartesian',
        store: {
          fields: ['name', 'p1', 'p2'],
          data: [
              { name: 'one',   p1: 10, p2: 3  },
               { name: 'two',  p1: 7,  p2: 5  },
              { name: 'three', /*p1: 5,*/  p2: 10 },
              { name: 'four',  p1: 2,  p2: 8  },
              { name: 'five',  p1: 18, p2: 15 }
          ]
        },
        axes: [
            {
                type: 'numeric',
                position: 'left',
                fields: ['p1', 'p2'],
                minimum: 0
            }, 
            {
                type: 'category',
                position: 'bottom',
                fields: ['name']
            }
        ],
        series: [ 
            {
                type: 'line',
                style: {
                    lineWidth: 3
                },
                xField: 'name',
                yField: 'p1',
                marker: 'circle',
                colors: ['red']
            },
            {
                type: 'line',
                style: {
                    lineWidth: 3
                },
                xField: 'name',
                yField: 'p2',
                marker: 'circle',
                colors: ['blue']
            }
        ]
    }
});

Answer 1

遗憾的是，您所遵循的行为是不可配置的。但是，总能找到一些可以做到的事情。在这种情况下，您可以为p1字段实施convert方法。

逻辑将找到上一个和下一个有效数据，然后从它们计算插值，以便满足图表。