折线图未连接点(Sencha-Charts程序包) [英] Line Chart Not Connecting Dots (Sencha-Charts Package)

问题描述

我遇到与 extjs 的问题有关的问题笛卡尔图表组件，无法在两点之间画一条线.在特定系列中，我已将问题缩小为缺少间隔数据，但没有找到一个好的解决方案.

I'm having issues with an extjs Cartesian chart component whereby it is failing to draw a line between two points. I've narrowed the issue down to missing interval-data for a step in a particular series but haven't found a good solution.

在下面的简化示例中，您将在红线中看到一个中断，其中位于蓝线上的数据的间隔为三"，该间隔位于两个红色标记之间.我正在尝试找到一种方法，该方法在跨几个部分仅存在 1个或更多步骤的部分数据的情况下，从间隔两个"的红色标记直接绘制到间隔四个"的标记系列.

In the following - simplified - example, you will see a break in the red line where data exists for a marker on the blue line at interval "three" - which sits between two red markers. I'm trying to find a way to draw straight from the red marker at interval "two" to the marker at interval "four" in a scenario where only partial data exists for 1 or more steps across several series.

在我的实时应用程序中，沿x轴的数据实际上是日期，因此期望每个系列在每个间隔的数据都是不合理的.我也不愿意在标记没有意义的伪造点上不存在任何数据，并且我会在点击事件中使用它们做其他事情.

In my live application the data along the x-axis are actually dates so it is unreasonable to expect data at every interval for every series. I am also reluctant to fake points where no data exists as the markers have meaning and I'm doing other things with them on click-events.

查看 API ，我唯一的调查思路似乎是

Looking at the API my only line of investigation seem to be overloading the Series renderer function but as yet, I've not figured out what triggers the draw as the documentation is scarce at best.

如果有人已经解决了这个问题，那么在我拆开该框架之前，我将不胜感激.还是-健全性检查-我错过了一些显而易见的配置属性吗?

I'd appreciate any pointers before I go picking apart the framework if someone's already gotten around this? Or - sanity check - have I missed some glaringly obvious configuration property?

»请摆弄

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字段的rel ="nofollow"> convert 方法.

The behavior you are after is, unfortunately, not configurable. However, there is always something that can be done about it. In this case you could implement a convert method for p1 field.

逻辑将找到前一个和下一个有效数据，然后从中计算出一个插值，从而使图表得到满足.

The logic would find previous and next valid data and then would calculate an interpolation from them so that the chart would be satisfied.

这篇关于折线图未连接点(Sencha-Charts程序包)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！