extjs - 如何在散点图中使用监听器获取getLimit()和setLimit()方法？

Question

我们如何通过在散点图中使用侦听器来获取 getLimit() 和 setLimit() 方法。任何人都可以解释组件中限制的动态变化。

这里附上听众的代码，

listeners: {
                            itemmousemove: function (series, item, event,tip) {

                                console.log('itemmousemove', item.category, item.field);
                            }
                        }

如何动态更改散点图中限制的属性，附上下面的代码。

limits: [{
                                value: 'metric two',
                                line: {
                                    strokeStyle: 'red',
                                    lineDash: [6, 3],
                                    title: {
                                        text: 'Qty',
                                        fontSize: 14,
                                        fontWeight: 'bold'
                                    }
                                }
                            }]

Answer 1

这是一个示例，您可以如何在图表中操作限制，但不确定您想在“itemmousemove”中做什么，所以我将其改为 itemdblclick 示例：

FIDDLE示例

Ext.application({
    name: 'Fiddle',
    layout: 'fit',

    launch: function () {

        var chart = Ext.create('Ext.chart.CartesianChart', {

            width: 600,
            height: 400,
            insetPadding: 40,
            interactions: ['itemhighlight'],
            plugins: {
                chartitemevents: {
                    moveEvents: true
                }
            },
            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: [{
                id: 'myAxis',
                type: 'numeric',
                position: 'left',
                fields: ['data1'],
                title: {
                    text: 'Sample Values',
                    fontSize: 15
                },
                grid: true,
                minimum: 0,
                limits: [{
                    value: 0.2,
                    line: {
                        strokeStyle: 'red',
                        lineDash: [6, 3],
                        title: {
                            text: 'Monthly minimum',
                            fontSize: 14
                        }
                    }
                }]
            }, {
                type: 'category',
                position: 'bottom',
                fields: ['name'],
                title: {
                    text: 'Sample Values',
                    fontSize: 15
                }
            }],
            series: {
                type: 'scatter',
                highlight: {
                    size: 12,
                    radius: 12,
                    fill: '#96D4C6',
                    stroke: '#30BDA7'
                },
                fill: true,
                xField: 'name',
                yField: 'data2',
                marker: {
                    type: 'circle',
                    fill: '#30BDA7',
                    radius: 10,
                    lineWidth: 0
                }

            },
            listeners: {
                itemdblclick: function (series, item, event, tip) {

                    var lim = chart.getAxis('myAxis').getLimits();
                    var new_lim = CreateNewLimit(0.9, 'yellow', 'Clicked Limit');
                    lim.push(new_lim);
                    RefreshChart(lim);

                }
            }
        });
        Ext.create('Ext.panel.Panel', {
            title: 'Scatter Chart',
            renderTo: document.body,
            tbar: [{
                xtype: 'button',
                text: 'Toggle Limit',
                handler: function () {

                    var lim = chart.getAxis('myAxis').getLimits();
                    var new_lim = CreateNewLimit(0.7, 'blue', 'Monthly Max');
                    if (lim.length == 1) {
                        lim.push(new_lim);
                    } else {
                        lim.splice(1, 1);
                    }
                    RefreshChart(lim);

                }
            }, {
                xtype: 'button',
                text: 'Add New ',
                handler: function () {

                    var lim = chart.getAxis('myAxis').getLimits();
                    var new_lim = CreateNewLimit(0.5, 'green', 'Monthly Average');
                    lim.push(new_lim);
                    RefreshChart(lim)
                }
            }],

            items: [
                chart
            ]
        });

        function RefreshChart(lim) {
            chart.getAxis('myAxis').setLimits(lim);
            chart.getStore().removeAll();
            chart.getStore().reload();

        }

        function CreateNewLimit(val, color, text) {
            return {
                value: val,
                line: {
                    strokeStyle: color,
                    lineDash: [6, 3],
                    title: {
                        text: text,
                        fontSize: 14
                    }
                }
            };
        }
    }
});