बहु रंगीन सेगमेंट के साथ लाइन चार्ट

Question

मैं Ext 5 का उपयोग कर रहा हूं और मानों के आधार पर लाइन चार्ट में सेगमेंट रंग करना चाहता हूं। लक्ष्य से अधिक मूल्य अन्यथा लाल रंग के हरे रंग में रेखा दिखाएं।

क्या इसके मूल्य के आधार पर एक्स्ट लाइन चार्ट में लाइन सेगमेंट का रंग बदलने का कोई तरीका है?

मैं मिल सकता है कि वहाँ इस link

मैं भी गतिशील रूप से लाइन पर एक लाइन स्प्राइट जोड़ने अलग रंग की एक प्रभाव बनाने की कोशिश की है से Sencha में ऐसा करने का कोई अंतर्निहित तरीका है। इसने काम कर दिया। लेकिन मैं इस कस्टम लाइन को गतिशील रूप से आकर्षित करने के लिए सटीक एक्स, वाई निर्देशांक नहीं ढूंढ पाया।

यह वह कोड है जिसे मैंने अभी तक आजमाया है।

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