Wykres liniowy z wieloma kolorowymi segmentami

Question

Używam Ext 5 i chciałbym pokolorować segmenty na wykresie liniowym na podstawie wartości. Pokaż linię w kolorze zielonym, jeśli wartość większa niż cel, jeśli nie jest czerwona.

Czy istnieje sposób na zmianę koloru segmentu linii na wykresie Ext w zależności od jego wartości?

mogę stwierdzić, że nie ma wbudowanego sposób to zrobić w Sencha z tego link

Próbowałem również dodać sprite wiersza dynamicznie nad linią dokonać wpływ różnych kolorach. Zadziałało. Nie udało mi się jednak znaleźć dokładnych współrzędnych x, y, aby dynamicznie narysować tę niestandardową linię.

To jest kod, który próbowałem do tej pory.

Ext.onReady(function() {  
    var data = [{ 
     'date': '1', 
     'data2': 4 
    }, { 
     'date': '2', 
     'data2': 8 
    }, { 
     'date': '3', 
     'data2': 12 
    }, { 
     'date': '4',   
     'data2': 6 
    }, { 
     'date': '5', 
     'data2': 36 
    }]; 

    Ext.create('Ext.chart.Chart', { 
     renderTo: Ext.getBody(), 
     width: 500, 
     height: 300, 
     store: { 
      fields: ['name', 'data2'], 
      data: data 
     }, 
     listeners: { 
      redraw: function(){ 
       var chart = this; 
       var series = chart.series[0]; 
       var dataRange = series.dataRange; 
       var large = dataRange.find(function(v){ return v>14 }); 
       if(large){ 
        var line = series.getSurface().add({ 
         type: 'line', 
         fromX: 354, 
         fromY: 75, 
         toX: 465, 
         toY: 257, 
         zIndex: 2000, 
         stroke: 'green', 
         'stroke-width': 2, 
        }).show(true); 
       }       
      } 
     }, 
     axes: [{ 
      type: 'numeric', 
      position: 'left', 
      fields: ['data2'], 
      title: { 
       text: 'Stores Visited', 
       fontSize: 15 
      }, 
      grid: true, 
      minimum: 0 
     }, { 
      type: 'category', 
      position: 'bottom', 
      fields: ['date'], 
      title: { 
       text: 'Date', 
       fontSize: 15 
      } 
     }], 
     series: [{ 
      type: 'line', 
      style: { 
       stroke: 'red', 
       lineWidth: 2 
      }, 
      xField: 'date', 
      yField: 'data2' 
     }] 
    }); 
}); 

Answer 1

Faktycznie, zmiana koloru całej linii, (co jest między per metryki) nie jest trudne. Problem polega na tym, jak zmienić kolor linii porcji. Aby rozwiązać ten problem, utworzyłem granice danych (przesuwane elementy brzegowe do przechowywania). Nie jestem pewien, czy będzie dla ciebie przydatny. Niestety, nie mam żadnego pomysłu poza tym. W każdym razie, proszę sprawdzić to skrzypce: https://fiddle.sencha.com/#fiddle/v0d

var data = [{ 
      'name': 'metric one', 
      'data2': 4 
     }, { 
      'name': 'metric two', 
      'data2': 8 
     }, { 
      'name': 'metric three', 
      'data2': 20 
     }, { 
      'name': 'metric four', 
      'data2': 12 
     }, { 
      'name': 'metric five', 
      'data2': 18 
     }, { 
      'name': 'metric six', 
      'data2': 24 
     }, { 
      'name': 'metric seven', 
      'data2': 36 
     }]; 
     var newData = []; 
     Ext.each(data, function(dt, index) { 

      newData.push(dt); 
      if((index != data.length-1) && dt.data2 < 14 && 14 < data[index+1].data2) { 
       newData.push({'data2': 14, name: index}); 
      }  
     }); 

     Ext.create('Ext.chart.Chart', { 
      renderTo: Ext.getBody(), 
      width: 500, 
      height: 300, 
      store: { 
      fields: ['name', 'data2'], 
       data: newData 
      }, 
      axes: [{ 
       type: 'numeric', 
       position: 'left', 
       fields: ['data2'], 
       title: { 
        text: 'Sample Values', 
        fontSize: 15 
       }, 
       grid: true, 
       minimum: 0 
      }, { 
       type: 'category', 
       position: 'bottom', 
       fields: ['name'], 
       title: { 
       text: 'Sample Values', 
       fontSize: 15 
      } 
      }], 
      series: [{ 
       type: 'line', 
       style: { 
        lineWidth: 2, 
        maxBarWidth: 30, 
        stroke: 'red' 
       }, 
       renderer: function(sprite, config, rendererData, index) { 

        var store = rendererData.store, 
        storeItems = store.getData().items, 
        record = storeItems[index], 
        prev = storeItems.length - 2, 
        last = storeItems.length - 1, 
        changes = {}; 
        if (!record) { 
         return; 
        } 
        if (record.get('data2') > 14) { 
         changes.strokeStyle = 'green'; 
        } else { 
         changes.strokeStyle = 'red'; 
        } 
        return changes; 
       }, 
       xField: 'name', 
       yField: 'data2' 
      }] 
     });