extjs 非单调折线图

8cdiaqws 于 2022-11-04 发布在其他

关注(0)|答案(1)|浏览(221)

我已经在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图表实现这一点？
检查视觉示例，以获得当前和所需的结果。
如果您需要任何额外的信息，请告诉我。

单调（当前结果）：

非单调（理想结果）

extjs

来源：https://stackoverflow.com/questions/70804009/non-monotonic-line-chart

1条答案

按热度按时间

gstyhher1#

你试过曲线属性吗？

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',

    }]
});

赞(0）回复(0）举报 2022-11-04

我来回答

extjs 非单调折线图

1条答案

相关问题

热门标签

最新问答