我遇到了问题extjs /questions/tagged/extjs笛卡尔图表组件无法在两点之间绘制一条线。我已将问题范围缩小到missing特定系列中某个步骤的间隔数据,但尚未找到好的解决方案。
在下面的简化示例中,您将看到红线中有一个断点,其中蓝线上的标记存在间隔“三”的数据,该标记位于两个红色标记之间。我正在尝试找到一种方法,在仅存在部分数据的情况下,直接从间隔“二”的红色标记绘制到间隔“四”的标记1个或以上跨多个系列的步骤。
在我的实时应用程序中,x 轴上的数据实际上是日期,因此期望每个系列的每个间隔都有数据是不合理的。我也舍不得fake没有数据存在的点,因为标记有意义,并且我在点击事件上用它们做其他事情。
看着API我唯一的调查线似乎超载Series renderer http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.chart.series.Series-cfg-renderer函数,但到目前为止,我还没有弄清楚是什么触发了抽奖,因为文档充其量是稀缺的。
如果有人已经解决了这个问题,那么在我开始拆解框架之前,我会很感激任何指示?或者 - 健全性检查 - 我是否错过了一些明显的配置属性?
» 请拨弄 https://fiddle.sencha.com/#fiddle/hga
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']
}
]
}
});