Javascript 两个Shield UI图表的链接图

我有一个关于shield ui图表库的问题。基本上，我在同一页上有两个图表。我想将它们联系起来，因为当用户从一个图表中选择一个条形图时，另一个控件将填充与选择相关的数据。

下面是一个显示两个图表的示例。左侧是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>"

$（函数（）{
$（“容器1”）.shieldChart({
主题：Themechoser.theme，
活动：{
pointSelect:函数pointSelectHandler（args）{
var-localData；
var headerText=“”数据用于：“+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]；
}
否则{
localData=[13,19,112,114,212,332,435,132,67,45,55,7]；
}
var containter=$（“容器2”）.swidget（）；
containter.destroy（）；
$（“容器2”）.shieldChart(
{
出口选择：
{
图片：错，
印刷品：假
},
主标头：{
文本：标题文本
},
数据系列：[
{
序列类型：“行”，
集合IAS:“Q数据”，
数据：localData
}
]
}
);
}
},
出口选择：
{
图片：错，
印刷品：假
},
系列设置：{
范围栏：
{
enablePointSelection:true
}
},
工具提示设置：{
customPointText:'低值：{point.Low}
高值：{point.High}'
},
axisY：{
标题：{
正文：“季度”
}
},
axisX：{
分类值：[“Q1”、“Q2”、“Q3”、“Q4”]
},
主标头：{
正文：“季度业绩”
},
数据系列：[
{
序列类型：“rangebar”，
集体行动：“低/高”，
数据：[[3,9]，[12,23]，[1,17]，-3,12]]
}
]
});
$（“容器2”）.shieldChart({
主题：Themechoser.theme，
出口选择：
{
图片：错，
印刷品：假
},
主标头：{
文本：“特定季度的值”
},
数据系列：[
{
序列类型：“行”，
集合IAS:“Q数据”，
数据：[12,3,4,2,12,3,4,17,22,34,54,67]
}
]
});
});
"