非单调折线图

Question

我在 ExtJS 中创建了一个折线图，但遇到了障碍。我想创建一个折线图，它不会以单调方式到达下一个点。假设我有以下数据集：

let testData = [{
        price: 500,
        date: '01-01-2021'
    }, {
        price: 200,
        date: '01-02-2021'
    }, {
        price: 1000,
        date: '02-09-2021'
    }];

当在 ExtJS 线图中使用此数据时，它将在 200 和 1000 的价格之间创建一条对角线，此数据表示不正确，因为这段时间价格没有逐渐上涨。

我的问题是：如何使用 ExtJS 图表实现此目的？

查看当前和理想结果的视觉示例。

如果您需要任何额外信息，请告诉我。

单调（当前结果）：

非单调（理想结果）

Answer 1

你试过了吗curve属性？

Ext.create({
    xtype: 'cartesian',

    renderTo: Ext.getBody(),
    width: 600,
    height: 400,
    insetPadding: 40,

    legend: {
        docked: 'bottom',
    },

    store: {
        fields: ['name', 'data1', 'data2'],

        data: [{
            'name': 'metric one',
            'data1': 10,
            'data2': 14
        }, {
            'name': 'metric two',
            'data1': 7,
            'data2': 16
        }, {
            'name': 'metric three',
            'data1': 5,
            'data2': 14
        }, {
            'name': 'metric four',
            'data1': 2,
            'data2': 6
        }, {
            'name': 'metric five',
            'data1': 27,
            'data2': 36
        }]
    },

    axes: [{
        type: 'numeric',
        position: 'left',
        fields: ['data1'],
        grid: true,
        minimum: 0
    }, {
        type: 'category',
        position: 'bottom',
        fields: ['name'],

    }],

    colors: ['#ffff00', '#00ffff'],

    series: [{
        type: 'line',
        xField: 'name',
        yField: 'data1',
        curve: {
            type: 'step-after'
        }
    }, {
        type: 'line',
        fill: false,
        xField: 'name',
        yField: 'data2',

    }]
});

非单调折线图

Non-monotonic line chart

javascript

charts

extjs