extjs - 仪表图可以有多色吗？

Question

请查看此代码并尝试使用确切的代码找到解决方案，因为我在 EXTJS 中比较新鲜：

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

    renderTo: Ext.getBody(),
    store: store,
    width: 400,
    height: 250,
    animate: true,
    insetPadding: 30,
    axes: [{
        type: 'gauge',
        position: 'gauge',
        minimum: 0,
        maximum: 100,
        steps: 10,
        margin: 10
    }],
    gradients: [{
        'id': 'v-1',
        'angle': 0,
        stops: {
                0: {
                    color: 'rgb(212, 40, 40)'
                    },
                100: {
                    color: 'rgb(117, 14, 14)'
                    }
                }
        },
        {
        'id': 'v-2',
        'angle': 0,
        stops: {
                0: {
                    color: 'rgb(180, 216, 42)'
                    },
                100: {
                    color: 'rgb(94, 114, 13)'
                    }
                }
        },
        {
        'id': 'v-3',
        'angle': 0,
        stops: {
                0: {
                    color: 'rgb(43, 221, 115)'
                    },
                100: {
                    color: 'rgb(14, 117, 56)'
                    }
                }
        },
        {
        'id': 'v-4',
        'angle': 0,
        stops: {
                0: {
                    color: 'rgb(45, 117, 226)'
                    },
                100: {
                    color: 'rgb(14, 56, 117)'
                    }
                }
        },
        {
        'id': 'v-5',
        'angle': 0,
        stops: {
                0: {
                    color: 'rgb(187, 45, 222)'
                    },
                100: {
                    color: 'rgb(85, 10, 103)'
                    }
                }
        }],
    series: [{
        type: 'gauge',
        field: 'value',
        donut: 30,
        colorSet:  ['url(#v-1)', '#ddd']
    }]
});

这是代码的一部分。我只是想知道仪表图表是否可能具有多种背景颜色，而它们都是静态的？比如 0-25=red , 25-50= yellow ,50-100= green 。

Answer 1

是的。有人已经通过扩展仪表系列完成了这项工作：http ://www.sencha.com/forum/showthread.php?159879-KPI-Gauge

您可以下载一个 .zip 文件并将其添加到您的库中。然后你基本上可以这样做：

{
            xtype: 'chart',
            style: 'background:#fff',
            animate: {
                easing: 'elasticIn',
                duration: 1000
            },
            store: store1,
            insetPadding: 50,
            flex: 1,
            axes: [{
                type: 'kpigauge',
                position: 'left',
                minimum: 0,
                maximum: 100,
                steps: 10,
                margin: 0,
                label: {
                    fill: '#333',
                    font: '12px Heveltica, sans-serif'
                }
            }],
            series: [{
                type: 'kpigauge',
                field: 'data1',
                needle: {
                    width: 2,
                    pivotFill: '#000',
                    pivotRadius: 5
                },
                ranges: [{
                    from: 0,
                    to: 70,
                    color: '#FF0000'
                }, {
                    from: 70,
                    to: 90,
                    color: '#FFFF00'
                }, {
                    from: 90,
                    to: 100,
                    color: '#00FF00'
                }],
                donut: 70
            }]