链接两个Shield UI图表的图形 [英] Linking graphs of two Shield UI Charts
本文介绍了链接两个Shield UI图表的图形的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
关于盾ui图表库,我有一个问题.本质上,我在同一页面上有两个图表.我想从某种意义上将它们相互关联,当用户从其中一个图表中选择一个条形图时,另一个控件将填充与选择有关的数据.
I have a question, regarding the shield ui chart library. Essentially, I have two charts on the same page. I would like to co-relate them in the sense that when the user selects a bar from one of the charts, the other control would be populated with data, related to the selection.
推荐答案
下面是显示两个图形的示例.左边是使用范围栏布局的4个季度数据集.单击它们中的每一个,都会在右图上显示有关数据的详细信息.
Below is an example showing two graphs. On the left are 4 quartery data sets, using the rangebar layout. Clicking on each one of them shows detailed information about the data on the right graph.
<script type=""text/javascript"">
$(function () {
$(""#container1"").shieldChart({
theme: ThemeChooser.theme,
events: {
pointSelect: function pointSelectHandler(args) {
var localData;
var headerText = ""Data For : "" + args.point.name;
if (args.point.x == 0) {
localData = [12, 3, 4, 2, 12, 3, 4, 17, 22, 34, 54, 67];
}
else if (args.point.x == 1) {
localData = [3, 9, 12, 14, 22, 32, 45, 12, 67, 45, 55, 7];
}
else if (args.point.x == 2) {
localData = [23, 19, 11, 134, 242, 352, 435, 22, 637, 445, 555, 57];
}
else {
localData = [13, 19, 112, 114, 212, 332, 435, 132, 67, 45, 55, 7];
}
var containter = $(""#container2"").swidget();
containter.destroy();
$(""#container2"").shieldChart(
{
exportOptions:
{
image: false,
print: false
},
primaryHeader: {
text: headerText
},
dataSeries: [
{
seriesType: 'line',
collectionAlias: 'Q Data',
data: localData
}
]
}
);
}
},
exportOptions:
{
image: false,
print: false
},
seriesSettings: {
rangebar:
{
enablePointSelection: true
}
},
tooltipSettings: {
customPointText: 'Low Value: <b>{point.low}</b></br>High Value:<b> {point.high}</b>'
},
axisY: {
title: {
text: ""Quarterly""
}
},
axisX: {
categoricalValues: [""Q1"", ""Q2"", ""Q3"", ""Q4""]
},
primaryHeader: {
text: ""Quarterly performance""
},
dataSeries: [
{
seriesType: 'rangebar',
collectionAlias: 'Low/High ',
data: [[3, 9], [12, 23], [1, 17], [-3, 12]]
}
]
});
$(""#container2"").shieldChart({
theme: ThemeChooser.theme,
exportOptions:
{
image: false,
print: false
},
primaryHeader: {
text: ""Values for specific quarter""
},
dataSeries: [
{
seriesType: 'line',
collectionAlias: 'Q Data',
data: [12, 3, 4, 2, 12, 3, 4, 17, 22, 34, 54, 67]
}
]
});
});
</script>"
这篇关于链接两个Shield UI图表的图形的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文