Линейная диаграмма с многоцветными сегментами

Question

Я использую Ext 5 и хотел бы сегментировать цветные диаграммы на основе значений. Показывать строку зеленого цвета, если значение больше цели, в противном случае красное.

Есть ли способ изменить цвет сегмента линии в линейной диаграмме Ext, основанной на ее значении?

я мог бы найти, что нет встроенного способа сделать это в сенча от этого link

Я также попытался добавить строку спрайт динамически над линией, чтобы сделать влияние различных цветов. Это сработало. Но я не смог найти точные координаты x, y, чтобы динамически рисовать эту настраиваемую строку.

Это код, который я пробовал до сих пор.

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

На самом деле, изменение цвета всей линии (которая находится между в метрике) не сложно. Проблема заключается в том, как изменить цвет линии порции. Чтобы исправить эту проблему, я создал границы данных (помещал граничные элементы для хранения). Я не уверен, что это будет полезно для вас. К сожалению, я не знаю, кроме этого. В любом случае, пожалуйста, проверьте эту скрипку: 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' 
      }] 
     });