5

以下のextjs4.1.1aコードは、折れ線グラフの実例です。次に、指定された最小および最大タイムスタンプでそのグラフの一部を強調表示する必要があります。

{'xtype' : 'chart',
'store' : 'ChartData',
'height' : '100%',
'width' : '100%',
'legend' : {'position' : top},
'axes': [{
    'title': 'Power',
    'type': 'Numeric',
    'position': 'left',
    'fields': ['power']
},{
    'title': 'Timestamp',
    'type': 'Numeric',
    'position': 'bottom',
    'fields': ['timestamp'],
    'minorTickSteps': 3
}],
'series': [{
    'type': 'line',
    'fill': true,
    'axis' : 'left',
    'xField': 'timestamp',
    'yField': 'power'
}]}

私は煎茶フォーラムを検索しましたが、私の要件を満たすものは特に見つかりませんでした。今のところ、カスタムレンダラーを使用して折れ線グラフ上のポイントの色を変更することができました。

'renderer': function(sprite, record, attr, index, store) {
var item = store.getAt(index);
if(item != undefined && (item.get('timestamp') < startdate || item.get('timestamp') > enddate)){
    return Ext.apply(attr, {'fill': '#00cc00', 'stroke-width': 3, 'radius': 4});
}else{
    return Ext.apply(attr, {'fill': '#ff0000', 'stroke-width': 3, 'radius': 4});
}}

しかし、線の下の色を変更する方法は見つかりませんでした。それについて何か提案はありますか？

更新-今は正常に動作しています

コロンボの答えに基づいたソリューションを実装します。

doCustomDrawing: function () {: function (p){
var me = this, chart = me.chart;
if(chart.rendered){
    var series = chart.series.items[0];
    if (me.groupChain != null) {
        me.groupChain.destroy();
        me.groupChain = null;
    }
    me.groupChain = Ext.create('Ext.draw.CompositeSprite', {
        surface: chart.surface
    });
    if(series != null && series.items != null){
        var surface = chart.surface;
        var pathV = 'M';
        var first = true;
        // need first and last x cooridnate
        var mX = 0,hX = 0;
        Ext.each(series.items, function(item){
            var storeItem = item.storeItem,
                    pointX = item.point[0],
                    pointY = item.point[1];
            // based on given startdate and enddate start collection path coordinates
            if(!(storeItem.get('timestamp') < startdate || storeItem.get('timestamp') > enddate)){
                if(hX<pointX){
                    hX = pointX;
                }
                if(first){
                    first = false;
                    mX = pointX;
                    pathV+= + pointX + ' ' + pointY;
                }else{
                    pathV+= ' L' + pointX + ' ' + pointY;
                }
            }
        });
        var sprite = Ext.create('Ext.draw.Sprite', {
            type: 'path',
            fill: '#f00',
            surface: surface,
            // to draw a sprite with the area below the line we need the y coordinate of the x axe which is in my case items[1]
            path : pathV + ' L'+ hX + ' ' + chart.axes.items[1].y + ' L'+ mX + ' ' + chart.axes.items[1].y + 'z'
        });
        me.groupChain.add(sprite);
        me.groupChain.show(true);
    }
}}

これは本当に見栄えがよく、私が望んでいた効果があります。コンテナのサイズを変更すると、新しいスプライトがチャートから削除されます。再びコロンボへのThx。

4

2 に答える 2

1

これを実装することは可能です。これが私がそれをする方法です。

afterrender1.のイベントのリスナーを追加しますseries。

listeners: {
                afterrender: function (p) {
                    this.doCustomDrawing();
                },
                scope: me
}

2.CompositeSpriteを作成します

doCustomDrawing: function () {
    var me = this, chart = me.chart;

    if (chart.rendered) {
        var series = chart.series.items[0];
        if (me.groupChain != null) {
            me.groupChain.destroy();
            me.groupChain = null;
        }

        me.groupChain = Ext.create('Ext.draw.CompositeSprite', {
            surface: chart.surface
        });

        // Draw hilight here
        Ext.each(series.items, function (item) {
            var storeItem = item.storeItem,
                pointX = item.point[0], 
                pointY = item.point[1];

            //TODO: Create your new line sprite using pointX and pointY
            // and add it to CompositeSprite me.groupChain  


        });

        me.groupChain.show(true);
    }
},
于 2012-11-07T01:15:24.067 に答える
0

これを実行するための「組み込み」の方法はありません。折れ線グラフを「強調表示」することは、現在ExtJS APIでまったく異なることを意味しているため、おそらくそれを探すのにいくつかの困難に直面しています。これは通常、データ系列の上にマウスを置いたときに線とマーカーを太字にすることを指します。

あなたのアイデアは面白そうに聞こえますが、私が考えているプロジェクトでこれを使用する必要があるかもしれません。

現在、正確なコードを作成する時間はありませんが、長方形のスプライトを作成し、それをグラフの表面プロパティに追加することで実行できます。

ドキュメントで説明されているExt.draw.Surface.add方法を使用してチャートがすべてレンダリングされた後でも、これを行うことができます。

幅と位置を決定するためのロジックを考え出す必要があります。チャートAPIを正しく覚えていれば、チャート内のオブジェクトのitemsプロパティを調べて、個々のレコードのx座標（水平位置）を抽出できるはずです。Ext.chart.series.Line

ただし、ハイライトの高さは簡単なはずです。チャートの高さを読んでください。

于 2012-11-06T19:30:54.880 に答える