javascript - 如何使 Extjs 面积、折线图曲线具有半径，因为它们的弯曲太尖锐

Question

我正在为 Extjs 开发一个混合图表组件，并且曲线太尖锐了。我找不到曲线具有半径的配置。如果你处理过类似的事情，你能提供一些方法让我的曲线变得平滑一点吗？这是我的代码:

Ext.define('Ext.vcops.rootCause.RootCauseScoreChart', {

    extend : 'Ext.chart.Chart',

    initMembers : function() {
        this.store = Ext.create('Ext.data.JsonStore', {
            fields: ['name', 'score', 'noiseIndex', 'line1', 'line2', 'line3'],
            data: generateData()
        });

        this.axes = [{
            type: 'Numeric',
            minimum: 0,
            maximum: 100,
            constrain: false,
            dashSize: 0,
            majorTickSteps: 7,
            position: 'left',
            title: 'Score',
            grid: true
        },{
            type: 'Category',
            position: 'bottom',
            grid: true,
            label: {
                renderer: function(name) {
                    return '';
                }
            }
        }];

        this.series = [{
            type: 'area',
            highlight: false,
            axis: 'left',
            xField: 'name',
            yField: ['score'],
            style: {
                opacity: 1
            }
        }, {
            type: 'line',
            axis: 'left',
            shadowAttributes: false,
            xField: 'name',
            yField: 'noiseIndex',
            style: {
                stroke: '#000000',
                'stroke-width': 1,
                opacity: 1,
                'stroke-dasharray': 10
            },
            showMarkers: false
        }, {
            type: 'line',
            axis: 'left',
            shadowAttributes: false,
            showInLegend: false,
            xField: 'name',
            yField: 'line1',
            style: {
                stroke: '#FFDD16',
                'stroke-width': 2,
                opacity: 1
            },
            showMarkers: false
        }, {
            type: 'line',
            axis: 'left',
            shadowAttributes: false,
            showInLegend: false,
            xField: 'name',
            yField: 'line2',
            style: {
                stroke: '#F1592A',
                'stroke-width': 2,
                opacity: 1
            },
            showMarkers: false
        }, {
            type: 'line',
            axis: 'left',
            shadowAttributes: false,
            showInLegend: false,
            xField: 'name',
            yField: 'line3',
            style: {
                stroke: '#EE1C25',
                'stroke-width': 2,
                opacity: 1
            },
            showMarkers: false
        }];
        this.themeAttrs.colors = ["#65B9E0", "#94ae0a", "#115fa6", "#a61120", "#ff8809", "#ffd13e", "#a61187", "#24ad9a", "#7c7474", "#a66111"];
    },

    initComponent : function() {
        this.initMembers();
        var config = {
            insetPadding: 0,
            legend: {
                position: 'right',
                boxStroke : 'transparent',
                boxFill: 'transparent'
            },
            listeners: {
                select: {
                    fn: function(me, selection) {
                        //TODO zoom logi here
                    }
                }
            }
        };

        Ext.apply(this, Ext.apply(config, this.initialConfig));
        Ext.vcops.rootCause.RootCauseScoreChart.superclass.initComponent.apply(this, arguments);
    }
});

Answer 1

我使用 fill=true 的折线图，它的效果与面积相同，但具有弯曲区域。

Ext.application({
name: 'Fiddle',
launch: function() {
    Ext.application({
        name: 'PanelHeaderItems',

        launch: function() {

            var graphStore = Ext.create('Ext.data.Store', {
                fields: ['kg', 'ha'],
                data: [{
                    "kg": "0.23",
                    "ha": "90"
                }, {
                    "kg": "0.4",
                    "ha": "20"
                }, {
                    "kg": "0.6",
                    "ha": "70"
                }, {
                    "kg": "0.8",
                    "ha": "56"
                }, {
                    "kg": "0.95",
                    "ha": "100"
                }]
            });

            wizardStep3Chart = new Ext.chart.CartesianChart({
                width: 400,
                height: 300,
                animation: true,
                store: graphStore,
                legend: {
                    position: 'right'
                },
                axes: [{
                    type: 'numeric',
                    position: 'left',
                    grid: true,
                    fields: ['ha'],
                    renderer: function(v) {
                        return v;
                    }
                }, {
                    type: 'numeric',
                    position: 'bottom',
                    grid: true,
                    adjustByMajorUnit: false,
                    fields: ['kg'],
                    label: {
                        rotate: {
                            degrees: -45
                        }
                    }
                }],
                series: [{
                    type: 'line',//<-----------
                    smooth:true,//<-----------
                    fill:true,//<-----------
                    axis: 'left',
                    xField: 'kg',
                    yField: 'ha',
                    style: {
                        opacity: 0.80
                    },
                    highlight: {
                        fillStyle: '#125489',
                        lineWidth: 2,
                        strokeStyle: '#fff'
                    },
                    tooltip: {
                        trackMouse: true,
                        style: 'background: #fff',
                        renderer: function(storeItem, item) {
                            this.setHtml(storeItem.get('ha') + ': ' + storeItem.get('kg'));
                        }
                    }
                }],
                renderTo: Ext.getBody()
            });
        }
    });
}

});