0
我有一個問題,關於屏蔽用戶界面圖表庫。基本上,我在同一頁上有兩個圖表。我想將它們聯繫起來,即當用戶從其中一個圖表中選擇一個欄時,另一個控件將填充與選擇有關的數據。鏈接兩個屏蔽用戶界面圖表
我有一個問題,關於屏蔽用戶界面圖表庫。基本上,我在同一頁上有兩個圖表。我想將它們聯繫起來,即當用戶從其中一個圖表中選擇一個欄時,另一個控件將填充與選擇有關的數據。鏈接兩個屏蔽用戶界面圖表
下面是一個顯示兩個圖的例子。左邊是4個四分類數據集,使用範圍欄佈局。點擊它們中的每一個都會顯示右側圖表中數據的詳細信息。
<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>"