Question

我正在尝试使用dojo创建图表。我选择了StackedColumns图表。我想让它互动。当用户单击图表列时，应调用超链接。但要创建超链接'url，我需要系列名称。当用户点击列时，有没有办法获得系列名称？我一直在寻找几天，但我没有找到任何解决方案。这是我的代码：

<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>

Answer 1

我在一个堆叠的酒吧尝试过这个并且效果很好：

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

evt.run.name根据您单击的列提供系列名称

Answer 2

大！谢谢Noelia！

我用它做饼图。您可以使用参数evt.index获取切片的索引号。

单击dojox.charting.Chart时如何获得Clicked系列名称？

2 个答案: