javascript - 两个 Shield UI 图表的链接图

Question

我有一个关于盾牌 ui 图表库的问题。本质上，我在同一页面上有两个图表。我想在某种意义上将它们关联起来，即当用户从其中一个图表中选择一个条形时，另一个控件将填充与选择相关的数据。

Answer 1

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