共有円グラフの作成

「クイックスタート」の例を基に、複合的な共有円グラフを作成できます。このタイプのグラフを使用すると、1 つのキャンバス上で、複数の円グラフを使用して関連データを表示できます。これらの円グラフは、同一の凡例を共有します。

次の例では、2 つの円グラフを使用して、主要な Web ブラウザの利用状況を 2010 年と 2014 年とで比較しています。左側の円グラフは 2010 年のブラウザ利用状況を示し、右側の円グラフは 2014 年のブラウザ利用状況を示しています。

HTML ファイルの <head> セクションで、ドキュメントの ready 関数を含むスクリプトを、以下のスクリプトに置き換えます。このスクリプトでは、次のようないくつかのウィジェットオプションを設定します。

X 軸と Y 軸を無効にします。
Tooltip（ヒント）としてデータラベルを表示します。
ヘッダにはタイトルテキストを表示します。
グラフの種類、ラベル、データ（および円グラフの半径）を seriesList に追加します。

ドロップダウンしてスクリプトをコピーし、<head> セクションに貼り付けます。

スクリプト	コードのコピー
<script type="text/javascript"> requirejs.config({ baseUrl: "http://cdn.wijmo.com/amd-js/3.20173.128", paths: { "jquery": "jquery-1.11.1.min", "jquery-ui": "jquery-ui-1.11.0.custom.min", "jquery.ui": "jquery-ui", "jquery.mousewheel": "jquery.mousewheel.min", "globalize": "globalize.min", "bootstrap": "bootstrap.min", //Needed if you use Bootstrap. "knockout": "knockout-3.1.0" //Needed if you use Knockout. } }); </script> <script id="scriptInit" type="text/javascript"> require(["wijmo.wijcompositechart"], function () { $(document).ready(function () { var data2010 = [ { label: "Chrome", data: 6.04 }, { label: "Firefox", data: 31.64 }, { label: "IE", data: 55.25 }, { label: "Safari", data: 3.76 }, { label: "Others", data: 3.31 } ]; var data2014 = [ { label: "Chrome", data: 43.67 }, { label: "Firefox", data: 18.90 }, { label: "IE", data: 22.85 }, { label: "Safari", data: 9.73 }, { label: "Others", data: 4.85 } ]; $("#wijcompositechart").wijcompositechart({ axis: { y: { visible: true, text: "Web Browsers", gridMajor: { visible: false }, textVisible: false}, x: { visible: true, textVisible: false, text: 'Year 2010' + " " + '-' + " " + 'Year 2014' } }, hint: { content: function () { return this.label + '\n ' + this.y + ''; } }, header: { text: "Web Browsers Usage" }, seriesList: [{ label: "2010-2014", type: "sharedPie", data: [ { label: "2010", center: { x: 200, y: 250 }, radius: 100, innerRadius: 40, legendEntry: true, datasource: data2010, data: { label: { bind: "label" }, value: { bind: "data" } } }, { label: "2014", center: { x: 450, y: 250 }, radius: 100, innerRadius: 40, legendEntry: true, datasource: data2014, data: { label: { bind: "label" }, value: { bind: "data" } } } ] }, { }], }); }); }); </script>

スクリプト

コードのコピー

<script type="text/javascript">
    requirejs.config({
        baseUrl: "http://cdn.wijmo.com/amd-js/3.20173.128",
        paths: {
            "jquery": "jquery-1.11.1.min",
            "jquery-ui": "jquery-ui-1.11.0.custom.min",
            "jquery.ui": "jquery-ui",
            "jquery.mousewheel": "jquery.mousewheel.min",
            "globalize": "globalize.min",
            "bootstrap": "bootstrap.min", //Needed if you use Bootstrap.
            "knockout": "knockout-3.1.0" //Needed if you use Knockout.
        }
    });
</script>
<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijcompositechart"], function () {

           $(document).ready(function () {

            var data2010 =
                [
                    { label: "Chrome", data: 6.04 },
                    { label: "Firefox", data: 31.64 },
                    { label: "IE", data: 55.25 },
                    { label: "Safari", data: 3.76 },
                    { label: "Others", data: 3.31 }
                ];

            var data2014 =
                [
                    { label: "Chrome", data: 43.67 },
                    { label: "Firefox", data: 18.90 },
                    { label: "IE", data: 22.85 },
                    { label: "Safari", data: 9.73 },
                    { label: "Others", data: 4.85 }
                ];


            $("#wijcompositechart").wijcompositechart({
                
                axis: {
                    y: { visible: true, text: "Web Browsers",  gridMajor: { visible: false }, textVisible: false},
                    x: { visible: true, textVisible: false, text: 'Year 2010' + " " + '-' + " " + 'Year 2014' }
                },

                hint: {
                    content: function () {
                        return this.label + '\n ' + this.y + '';
                    }
                },
                header: {
                    text: "Web Browsers Usage"
                },
                seriesList: [{
                 
                    label: "2010-2014",
                    type: "sharedPie",
                    data: [
                        {
                            
                            label: "2010",
                            center: { x: 200, y: 250 },
                            radius: 100,
                            innerRadius: 40,
                            legendEntry: true,
                            datasource: data2010,
                            data: {
                                label: { bind: "label" },
                                value: { bind: "data" }
                            }
                        },
                        {
                            label: "2014",
                            center: { x: 450, y: 250 },
                            radius: 100,
                            innerRadius: 40,
                            legendEntry: true,
                            datasource: data2014,
                            data: {
                                label: { bind: "label" },
                                value: { bind: "data" }
                            }
                        }
                    ]
                }, {

                }],

            });
        });
    });
    </script>

HTML ファイルの <body> セクションは、変更の必要はありません。このウィジェットの作成には、基本的な <div> タグで十分です。
HTML ファイルを保存し、ブラウザで開きます。作成されたウィジェットは、実際には次のようになり、共有円グラフが表示されます。

関連トピック