不连接点的折线图(Sencha-Charts 包)
Line Chart Not Connecting Dots (Sencha-Charts Package)
我在使用 extjs 笛卡尔图表组件时遇到问题,它无法在两点之间画一条线。我已将问题缩小到 缺少 特定系列中某个步骤的间隔数据,但还没有找到好的解决方案。
在下面的简化示例中,您会看到红线出现中断,其中蓝线上标记的数据存在于间隔 "three" - 位于两个红色标记之间。我正在尝试找到一种方法,在 1 或更多 仅存在部分数据的情况下,直接从间隔 "two" 的红色标记绘制到间隔 "four" 的标记。 =35=] 跨多个系列。
在我的实时应用程序中,x 轴上的数据实际上是日期,因此期望每个系列的每个时间间隔都有数据是不合理的。我也不愿意 伪造 不存在数据的点,因为标记具有意义,我在点击事件上用它们做其他事情。
查看 API 我唯一的调查似乎是重载 Series renderer
函数,但到目前为止,我还没有弄清楚是什么触发平局,因为文档充其量是稀缺的。
如果有人已经解决了这个问题,在我开始拆解框架之前,我将不胜感激任何指点?或者 - 健全性检查 - 我是否错过了一些明显的配置 属性?
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']
}
]
}
});
不幸的是,您所追求的行为是不可配置的。但是,总有办法解决它。在这种情况下,您可以为 p1
字段实现 convert
方法。
逻辑会找到上一个和下一个有效数据,然后根据它们计算插值以满足图表。
我在使用 extjs 笛卡尔图表组件时遇到问题,它无法在两点之间画一条线。我已将问题缩小到 缺少 特定系列中某个步骤的间隔数据,但还没有找到好的解决方案。
在下面的简化示例中,您会看到红线出现中断,其中蓝线上标记的数据存在于间隔 "three" - 位于两个红色标记之间。我正在尝试找到一种方法,在 1 或更多 仅存在部分数据的情况下,直接从间隔 "two" 的红色标记绘制到间隔 "four" 的标记。 =35=] 跨多个系列。
在我的实时应用程序中,x 轴上的数据实际上是日期,因此期望每个系列的每个时间间隔都有数据是不合理的。我也不愿意 伪造 不存在数据的点,因为标记具有意义,我在点击事件上用它们做其他事情。
查看 API 我唯一的调查似乎是重载 Series renderer
函数,但到目前为止,我还没有弄清楚是什么触发平局,因为文档充其量是稀缺的。
如果有人已经解决了这个问题,在我开始拆解框架之前,我将不胜感激任何指点?或者 - 健全性检查 - 我是否错过了一些明显的配置 属性?
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']
}
]
}
});
不幸的是,您所追求的行为是不可配置的。但是,总有办法解决它。在这种情况下,您可以为 p1
字段实现 convert
方法。
逻辑会找到上一个和下一个有效数据,然后根据它们计算插值以满足图表。