javascript - 2 つの Shield UI Chart のグラフのリンク

Question

シールド UI チャート ライブラリについて質問があります。基本的に、同じページに 2 つのグラフがあります。ユーザーがグラフの 1 つからバーを選択すると、選択に関連するデータが他のコントロールに入力されるという意味で、それらを相互に関連付けたいと思います。

Answer 1

以下は、2 つのグラフを表示する例です。左側には、範囲バー レイアウトを使用した 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>"