在 Ext JS 中單擊時，使圖表中的條形保持突出顯示？

Question

在Ext.chart.Chart ，當單擊一個條形時，我希望它保持突出顯示，直到單擊另一個條形。 我怎么做？

Answer 1

雖然我認為您的問題不完整並且您可以向我們提供一些代碼，但我創建了一個Sencha Fiddle來向您展示如何突出顯示條形圖中的項目。

在我為您提供一些代碼之前，我想告訴您我的步驟是什么。 我從來沒有使用過圖表庫，所以我從空白開始。 我幾乎不需要侵入 dom，並且將 ExtJs 視為一個成熟的框架，我理所當然地認為 ExtJs 將為我提供您所要求的功能。

我采取的步驟

1. 我想掛在 itemclick 上，圖表的某個itemclick是否是itemclick事件？
2. 是的，它確實。 我可以在series上配置一個 itemclick 偵聽器。 文檔告訴我，當我想使用 itemevents 時，我必須配置一個ItemEvents插件。
3. 在配置一個項目itemclick series並在chart上配置plugin ，我看看提供了哪些參數。 太好了，系列和點擊的項目已經提供。 現在，我可以使用setHighlightItem()中的series ，以hightlight點擊的項目。
   
4. 所以在itemclick我可以調用series.setHighlightItem(item)但它不起作用。 為什么？ 我必須配置highlight嗎？ 是的。
5. 將highlight設置為 true 或配置對象（對於某些樣式）后，它就像一個魅力。

小提琴的代碼

Ext.application({
    name: 'Fiddle',

    launch: function() {
        Ext.create('Ext.Container', {
            renderTo: Ext.getBody(),
            width: 600,
            height: 400,
            layout: 'fit',
            items: {
                xtype: 'cartesian',
                // hightlight item on click
                //interactions: 'itemhighlight', // --> don't set an interaction
                plugins: {
                    ptype: 'chartitemevents',
                    moveEvents: true
                },
                // eo hightlight item on click
                store: {
                    fields: ['name', 'value'],
                    data: [{
                        name: 'metric one',
                        value: 10
                    }, {
                        name: 'metric two',
                        value: 7
                    }, {
                        name: 'metric three',
                        value: 5
                    }, {
                        name: 'metric four',
                        value: 2
                    }, {
                        name: 'metric five',
                        value: 27
                    }]
                },
                axes: [{
                    type: 'numeric',
                    position: 'left',
                    title: {
                        text: 'Sample Values',
                        fontSize: 15
                    },
                    fields: 'value'
                }, {
                    type: 'category',
                    position: 'bottom',
                    title: {
                        text: 'Sample Values',
                        fontSize: 15
                    },
                    fields: 'name'
                }],
                series: {
                    type: 'bar',
                    xField: 'name',
                    yField: 'value',
                    style: {
                        fill: 'blue'
                    },
                    
                    // hightlight item on click
                    highlight: {
                        strokeStyle: 'black',
                        lineDash: [5, 3]
                    },
                    listeners: {
                        itemclick: function(series, item, event, eOpts) {
                            series.setHighlightItem(item);
                        }
                    }
                    // eo hightlight item on click
                }
            }
        });
    }
});

Answer 2

對於ExtJS的6.x中，可以覆蓋（或延伸）的updateHighlightItem的方法Ext.chart.AbstractChart ：

Ext.override(Ext.chart.AbstractChart, {
    updateHighlightItem: function (newHighlightItem, oldHighlightItem) {
        if (!newHighlightItem || newHighlightItem === oldHighlightItem) {
            this.setHighlightItem(oldHighlightItem);
            return
        }
        if (oldHighlightItem) {
            oldHighlightItem.series.setAttributesForItem(oldHighlightItem, {highlighted: false});
        }
        if (newHighlightItem) {
            newHighlightItem.series.setAttributesForItem(newHighlightItem, {highlighted: true});
            this.fireEvent('itemhighlight', this, newHighlightItem, oldHighlightItem);
        }
        this.fireEvent('itemhighlightchange', this, newHighlightItem, oldHighlightItem);
    }
})