ExtJS折線圖，動態更改標記的顏色

Question

如何根據y軸值有條件地更改ExtJS折線圖的標記顏色？

Answer 1

您需要更改markerConfig

也許是「補」的參數，你這個解決方案的工作：當你想要的顏色變化Change Color plot Points

？在任何指定事件或行動？

Answer 2

所以，我應該重寫方法。在這部分代碼

Ext.define('RogovIndex.Chart.Line', { 
    extend: 'Ext.chart.series.Line', 
    alias: 'series.multycolorline', 
    drawSeries: function() { 
    //a lot of code 
}}); 

然後我火了自定義事件（「beforemarkerrender」）：
我定義了一個新的圖表線組件

if (showMarkers) { 
       count = 0; 
       for (i = 0; i < ln; i++) { 
        if (me.items[i]) { 
         item = markerGroup.getAt(count++); 
         if (item) { 
          me.addEvents('beforemarkerrender'); 
          me.fireEvent('beforemarkerrender', item, endMarkerStyle, store, i); 
          rendererAttributes = me.renderer(item, store.getAt(i), item._to, i, store); 
          item.setAttributes(Ext.apply(endMarkerStyle || {}, rendererAttributes || {}), true); 
          if (!item.attr.hidden) { 
           item.show(true); 
          } 
         } 
        } 
       } 
       for (; count < markerCount; count++) { 
        item = markerGroup.getAt(count); 
        item.hide(true); 
       } 
      } 

所以，我所剩下要做的就是改變在這個事件（檢查類型和聽衆部分）上的seria和訂閱的類型：

series: [ 
       { 
        type: 'multycolorline', 
        axis: 'left', 
        xField: 'ValueDateString', 
        yField: 'Value', 
        style: { 
         stroke: '#aaa' 
        }, 
        markerConfig: { 
         type: 'circle', 
         size: 6, 
         radius: 6, 
         'stroke-width': 0, 
         fill: 'url(#v-2)' 
        }, 
        highlight: { 
         size: 7, 
         radius: 7 
        }, 
        tips: { 
         trackMouse: true, 
         minWidth: 170, 
         renderer: function (storeItem, item) { 
          this.update('Value 2: ' + storeItem.get('Value')); 
         } 
        }, 
        listeners: { 
         'beforemarkerrender': function (marker, markerStyle, store, index) { 
          var item = store.getAt(index); 
          if (item.get('Equal')) { 
           markerStyle.fill = 'url(#v-1)'; 
          } else { 
           markerStyle.fill = 'url(#v-2)'; 
          } 
         } 
        } 
       } 
      ]