Grafico a linee con segmenti multicolori

Question

Sto utilizzando Ext 5 e desidero colorare i segmenti in un grafico a linee in base ai valori. Mostra la linea in verde se il valore è maggiore del bersaglio altrimenti rosso.

C'è un modo per cambiare il colore di un segmento di linea nel grafico a linee Ext in base al suo valore?

sono riuscito a trovare che non esiste un modo integrato di fare questo in sencha da questo link

ho provato anche aggiungere uno sprite linea dinamica sopra la linea di fare un impatto di vari colori. Ha funzionato. Ma non sono riuscito a trovare le esatte coordinate x, y per disegnare dinamicamente questa linea personalizzata.

Questo è il codice che ho provato finora.

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

realtà, cambiando il colore di tutta la linea, (che è tra metrica a) non è difficile. Il problema è come cambiare il colore della linea di porzione. Per risolvere questo problema, ho creato dei limiti di dati (elementi di confine spinti per l'archiviazione). Non sono sicuro che ti sarà utile. Sfortunatamente, non ho alcuna idea tranne questa. Comunque, per favore controlla questo violino: 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' 
      }] 
     });