Wijmo UI for the Web
マークアップとスクリプティング

wijCompositeChart ウィジェットの HTML マークアップは次のようになります。

マークアップ
コードのコピー
<div id="wijcompositechart" style="width: 500px; height: 400px">
</div>

次の jQuery スクリプトでウィジェットを初期化できます。

スクリプト
コードのコピー
<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"
            }
    });
</script>

<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijcompositechart"], function () {
        $(document).ready(function () {
    $("#wijcompositechart").wijcompositechart({
        //Sets title text vertically along the Y axis.
        axis: {y: {text: "Total Hardware"}},
        //Creates the tooltip text to display on each column, line, 
        //and pie wedge using the label supplied for each data 
        //series in the seriesList.
        hint: {
            content: function () {return this.label + '\n ' + this.y + '';}
        },
        //Sets title text to display above the chart. 
        header: {text: "Hardware Distribution"},
        //Creates an array of series objects to display in the 
        //chart, including the type of chart, label, and x 
        //and y data values.
        seriesList: [
        {
            type: "column",
            //Sets the label to use in the legend, and for this chart, 
            //it is called to display in the hint as well.
            label: "West",
            data: { 
                x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], 
                y: [5, 3, 4, 7, 2] }
        }, 
        {
            type: "column",
            label: "Central",
            data: { 
                x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], 
                y: [2, 2, 3, 2, 1] }
        }, 
        {
            type: "column",
            label: "East",
            data: { 
                x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], 
                y: [3, 4, 4, 2, 5] }
        }, 
        {
            type: "pie",
            label: "asdfdsfdsf",
            center: { x: 150, y: 150 },
            radius: 60,
            data: [
                {label: "MacBook Pro", data: 46.78}, 
                {label: "iMac", data: 23.18}, 
                {label: "MacBook", data: 20.25}]
        }, 
        {
            type: "line",
            label: "Steam1",
            data: {
                x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'],
                y: [3, 6, 2, 9, 5]
                },
            markers: {visible: true, type: "circle"}
        }, 
        {
            type: "line",
            label: "Steam2",
            data: {
                x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'],
                y: [1, 3, 4, 7, 2]
            },
            markers: {visible: true, type: "tri"}
        }
    ]
});
        });
    });
</script>

ここで説明しているマークアップとスクリプトの結果は次のようになります。CompositeChart にマウスポインタを合わせると、アニメーション表示されます。

関連トピック

参照

 

 


Copyright © GrapeCity inc. All rights reserved.