2012-11-28 25 views
3

我想使用道場創建圖表。我選擇一個StackedColumns圖表。我想讓它互動。當用戶點擊圖形列時,應該調用超鏈接。但要創建超鏈接,我需要系列名稱。當用戶點擊一列時,有什麼方法可以獲得系列名稱?我一直在尋找天,但我沒有找到任何解決方案。這裏是我的代碼:如何在點擊dojox.charting.Chart時點擊系列名稱?

<div id="chartNode" style="width: 1024px; height: 768px;"></div> 
<div id="legend"></div> 

<script type="text/javascript"> 

require(['dojox/charting/Chart', 
'dojox/charting/themes/PrimaryColors', 
'dojox/charting/plot2d/StackedColumns', 
'dojox/charting/plot2d/Grid', 
'dojox/charting/widget/Legend', 
'dojox/charting/action2d/Tooltip', 
'dojox/charting/action2d/Magnify', 
'dojox/charting/action2d/Highlight', 
'dojo/store/Observable', 
'dojo/store/Memory', 
'dojox/charting/StoreSeries', 
'dojox/charting/axis2d/Default', 
'dojo/domReady!'], function(Chart, theme, StackedColumns,Grid,Legend,Tooltip,Magnify,Highlight,Observable,Memory,StoreSeries){ 

var myData = [{id:1,value:1,site:'1'}, 
          {id:2,value:2,site:'1'}, 
          {id:3,value:6,site:'1'}, 
          {id:4,value:4,site:'1'}, 
          {id:5,value:5,site:'1'}, 
          {id:6,value:1,site:'2'}, 
          {id:7,value:3,site:'2'}, 
          {id:8,value:1,site:'2'}, 
          {id:9,value:2,site:'2'}, 
          {id:10,value:7,site:'2'}]; 


var myStore = new Observable(new Memory({ 
data: { identifier: 'id', 
       items: myData 
      } 
})); 

var serie_1 = new StoreSeries(myStore, { query: { site: 1 } }, 'value'); 
var serie_2 = new StoreSeries(myStore, { query: { site: 2 } }, 'value'); 

var myChart = new Chart('chartNode'); 
myChart.setTheme(theme); 
myChart.addAxis('x', { fixLower: 'minor', 
      fixUpper: 'minor', 
      natural: true, 
      rotation: 90 
}); 

myChart.addAxis('y', {vertical: true,fixLower: 'major',fixUpper: 'major',minorTicks: true,includeZero: true}); 
myChart.addPlot('myPlot', { type: 'StackedColumns', gap: 5, minBarSize: 8});          

myChart.addSeries('Serie 1',serie_1,{ stroke: { color: 'red' }, fill: 'lightpink' }); 
myChart.addSeries('Serie 2',serie_2,{ stroke: { color: 'blue' }, fill: 'lightblue' }); 

var highlight = new Highlight(myChart, 'myPlot'); 

myChart.render(); 

var legend = new Legend({ chart: myChart }, 'legend'); 

myChart.connectToPlot('myPlot',function(evt) { 
// React to click event 
    if(type == 'onclick') { 
    var msg = 'x:'+evt.x+';y:'+evt.y+';index: '+evt.index+';value: '+evt.run.data[evt.index]; 
    alert(msg); 
    //How to get series informations when onclick event fires??? 

    } 
    var tip = new Tooltip(myChart,'myPlot',{text:function(evt){return evt.run.data[evt.index];}}); 

}); 

}); 

</script> 

回答

2

我在堆積條形圖嘗試這樣做,效果很好:

chart.connectToPlot("default", function(evt) {var type = evt.type; if(type=="onclick") console.log(evt.run.name);}) 

evt.run.name提供了基於您點擊

+0

謝謝,它的作品! :) – javaduke

0

大柱系列名稱!謝謝Noelia!

我已經將它用於餅圖。您可以使用參數evt.index獲取切片的索引號。

相關問題