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); 
       } 
      } 

, 내가 왼쪽으로 모든 변화는 (유형 및 수신기 유형을 확인하십시오.) :

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)'; 
          } 
         } 
        } 
       } 
      ]