wijmo制作复合图表

手写签名官网： http://willowsystems.github.io/jSignature/#/demo/

wijmo API: http://wijmo.com/wiki/index.php/Compositechart

wijmo 中文官网;: http://wijmo.gcpowertools.com.cn/

首先引入三个包
<link href="chart/jquery-wijmo.css" rel="stylesheet" type="text/css" />


<!--Wijmo Widgets CSS-->
<link href="chart/jquery.wijmo-pro.all.3.20151.69.min.css" rel="stylesheet" type="text/css" />


<!--RequireJs-->

<script type="text/javascript" src="chart/require.js"></script>

再写段脚本

<script type="text/javascript">
    requirejs.config({
        baseUrl: "chart/amd-js",
            paths: {
                "jquery-ui": "jquery-ui-1.11.0.custom.min",
                "jquery.ui": "jquery-ui",
                "jquery.mousewheel": "jquery.mousewheel.min",
                "globalize": "globalize.min"
            }
    });
    require(["wijmo.wijcompositechart"], function (){});
</script>

<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijcompositechart"], function () {
        $(document).ready(function () {
            $("#wijcompositechart").wijcompositechart({
                axis: {
                    y: {text: "Total Hardware"},
                    x: {text: ""}
                },
                hint: {
                    content: function () {return this.label + '\n ' + this.y + '';}
                },
                header: {text: "Hardware Distribution"},
                seriesList: [{
                    type: "column",
                    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: 350 },
                    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>


<div id="wijcompositechart" style="width: 500px; height: 400px">
</div>