我们可以在 Extjs 散点图系列中添加图像吗？

Question

我可以看到在 ExtJs 分散的购物车中，我们可以使用不同的标记配置来显示十字、圆形、方形等。但我们可以在其中显示图像或字形吗？

Answer 1

是的，您可以显示图像而不是圆形、正方形等。

您需要覆盖 Ext.chart.Shape 为您的系列添加其他图像类型。您可以在 ma​​rkerConfig 系列中使用那些定义的类型。

基本上，您需要定义自己的形状类型，该形状类型将在图表中使用Ext.draw.Sprite 创建。

这是一个使用 ExtJS 4.2.1.x 的工作示例：

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.override(Ext.chart.Shape, {
            newPhone: function (surface, opts) {
                return surface.add(Ext.apply({
                    type: 'image',
                    src: 'http://icons.iconarchive.com/icons/igh0zt/ios7-style-metro-ui/512/MetroUI-Other-Phone-icon.png',
                    x: opts.x,
                    y: opts.y,
                    width: 14,
                    height: 14
                }, opts));
            },
            oldPhone: function (surface, opts) {
                return surface.add(Ext.apply({
                    type: 'image',
                    src: 'https://cdn3.iconfinder.com/data/icons/communication-1/100/old_phone-512.png',
                    x: opts.x,
                    y: opts.y,
                    width: 14,
                    height: 14
                }, opts));
            }
        });

        var store = Ext.create('Ext.data.JsonStore', {
            fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
            data: [{
                'name': 'metric one',
                'data1': 10,
                'data2': 12,
                'data3': 14,
                'data4': 8,
                'data5': 13
            }, {
                'name': 'metric two',
                'data1': 7,
                'data2': 8,
                'data3': 16,
                'data4': 10,
                'data5': 3
            }, {
                'name': 'metric three',
                'data1': 5,
                'data2': 2,
                'data3': 14,
                'data4': 12,
                'data5': 7
            }, {
                'name': 'metric four',
                'data1': 2,
                'data2': 14,
                'data3': 6,
                'data4': 1,
                'data5': 23
            }, {
                'name': 'metric five',
                'data1': 27,
                'data2': 38,
                'data3': 36,
                'data4': 13,
                'data5': 33
            }]
        });

        Ext.create('Ext.chart.Chart', {
            renderTo: Ext.getBody(),
            width: 600,
            height: 600,
            animate: true,
            theme: 'Category2',
            store: store,
            axes: [{
                type: 'Numeric',
                position: 'left',
                fields: ['data2', 'data3'],
                title: 'Sample Values',
                grid: true,
                minimum: 0
            }, {
                type: 'Category',
                position: 'bottom',
                fields: ['name'],
                title: 'Sample Metrics'
            }],
            series: [{
                type: 'scatter',
                markerConfig: {
                    type: 'oldPhone'
                },
                axis: 'left',
                xField: 'name',
                yField: 'data2'
            }, {
                type: 'scatter',
                markerConfig: {
                    type: 'newPhone'
                },
                axis: 'left',
                xField: 'name',
                yField: 'data3'
            }]
        });
    }
});

小提琴示例： https://fiddle.sencha.com/#view/editor&fiddle/29rm