手順 2：ウィジェットの初期化

前の手順では、マークアップを追加し、バブルチャートに表示するコンテンツを追加しました。ここで、jQuery スクリプトを追加し、ウィジェットを初期化して、さらに、X と Y 軸のテキスト設定、グラフラベルへのツールチップの追加、「ハードウェア販売」という名前のグラフヘッダーの追加を行った後、seriesList を使用して X 軸に文字列データと Y 軸に数値データを持つ３つのデータ系列を作成できます。

前の手順で追加した終了の </div> タグの後に、次の jQuery スクリプトを入力して、wijbubblechart ウィジェットを初期化します。

ソースビュー	コードのコピー
<script type="text/javascript"> $(document).ready(function () { $("#wijbubblechart").wijbubblechart({ minimumSize: 3, MaximumSize: 15, axis: { y: { text: "ハードウェア数" }, x: { text: "" } }, hint: { content: function () { return 'x:' + this.x + ',y:' + this.y + ",y1:" + this.data.y1; } }, header: { text: "ハードウェア分布" }, seriesList: [{ label: "西", legendEntry: true, data: { x: [5, 14, 20, 18, 22], y: [5500, 12200, 60000, 24400, 32000], y1: [3, 12, 33, 10, 42] } // markers: { 型： 'tri' // } }] }); }); </script>

ソースビュー

コードのコピー

<script type="text/javascript">
            $(document).ready(function () {
                  $("#wijbubblechart").wijbubblechart({
                        minimumSize: 3,
                        MaximumSize: 15,
                        axis: {
                              y: {
                                    text: "ハードウェア数"
 
                              },
                              x: {
                                  text: ""
                             }
                        },
                        hint: {
                              content: function () {
                                    return 'x:' + this.x + ',y:' + this.y + ",y1:" + this.data.y1;
                              }
                        },
                        header: {
                              text: "ハードウェア分布"
                        },
                        seriesList: [{
                              label: "西",
                              legendEntry: true,
                              data: { x: [5, 14, 20, 18, 22], y: [5500, 12200, 60000, 24400, 32000], y1: [3, 12, 33, 10, 42] }
                              //                    markers: {
型： 'tri'
                              //                            }
                        }]
                  });
            });
      </script>