不连接点的折线图(Sencha-Charts 包)

2023-12-20

我遇到了问题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']
            }
        ]
    }
});

不幸的是,您所追求的行为是不可配置的。然而,总有办法解决它。在这种情况下,您可以实施convert http://docs-origin.sencha.com/ext/5.1/5.1.0-apidocs/#!/api/Ext.data.field.Field-method-convert方法用于p1 field.

该逻辑将找到上一个和下一个有效数据,然后根据它们计算插值,以便满足图表的要求。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

不连接点的折线图(Sencha-Charts 包) 的相关文章

随机推荐