マルチカラーセグメントの線グラフ

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