當在Ext JS中單擊圖表時，在圖表中保持突出顯示仍然突出顯示？

Question

在Ext.chart.Chart，當單擊一個欄時，我希望它保持高亮顯示，直到單擊另一個欄。我怎麼做？

Answer 1

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

在我給你提供一些代碼之前，我想告訴你我的步驟是什麼。我從來沒有與圖表庫合作過，所以我從空白處走過。我幾乎從不需要深入研究dom，並將ExtJs視爲一個成熟的框架，我認爲ExtJs將爲我提供所需的功能。

步驟我把

1. 我想鉤上itemClick在，做了圖表的項目 itemclick事件？
2. 是的，它的確如此。我可以在series上配置一個itemclick監聽器。文檔告訴我，當我想使用itemevents時，我必須配置一個ItemEvents插件。
3. 配置itemclickseries後配置plugin在chart我看看提供了哪些參數。太棒了， 該系列和點擊項目已經提供。現在我可以使用 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 
       } 
      } 
     }); 
    } 
});