量表可以有多色嗎？

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 =紅色，25-50 =黃色，50-100 =綠色。

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 
      }]