Question

在extjs 4.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'
}]}

我搜索了sencha论坛，发现什么都没有达到我的要求。现在，我设法使用自定义渲染器更改折线图上的点的颜色。

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

这看起来非常好，并且具有我希望和的效果，如果你调整容器的大小，新的精灵从图表中清除。再次拜访科伦坡。

Answer 1

这是可以实现的。我就是这样做的。

<强> 1。为afterrender添加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);
    }
},

Answer 2

没有“内置”方式可以解决这个问题。您可能在寻找它时遇到一些困难，因为“突出显示”折线图目前意味着ExtJS API中的完全不同。它通常是指将鼠标悬停在数据系列上时使行和标记变为粗体。

然而，你的想法听起来很有趣，我可能需要在我即将推出的项目中使用它。

我现在没有时间计算出确切的代码，但可以通过创建矩形sprite并将其添加到图表的surface property来完成。

即使使用文档中描述的here Ext.draw.Surface.add方法全部呈现图表，您也可以这样做。

你必须提出确定宽度和位置的逻辑，如果我记得正确的图表API，你应该能够通过在items中捕鱼来提取单个记录的x坐标（水平位置）图表中Ext.chart.series.Line对象的属性。

高光的高度应该很简单 - 只需读取图表的高度。

突出显示extjs4折线图的一部分

2 个答案: