转载：EasyUI的Web开发框架经验总结（4）--使用图表控件Highcharts

@*添加Jquery，EasyUI和easyUI的语言包的JS文件*@
    <script type="text/javascript" src="~/Content/JqueryEasyUI/jquery.min.js"></script>
    <script type="text/javascript" src="~/Content/JqueryEasyUI/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="~/Content/JqueryEasyUI/locale/easyui-lang-zh_CN.js"></script>


    @*图表JS文件应用*@
    <script src="~/Content/JQueryTools/Highcharts/js/highcharts.js"></script>

@*图表JS文件应用*@
    <script src="~/Content/JQueryTools/Highcharts/js/highcharts.js"></script>
    <script src="~/Content/JQueryTools/Highcharts/js/modules/exporting.js"></script>
    <script src="~/Content/JQueryTools/Highcharts/js/themes/grid.js"></script>

<script src="~/Content/JQueryTools/Highcharts/js/highcharts-more.js"></script>
    <script src="~/Content/JQueryTools/Highcharts/js/highcharts-3d.js"></script>

$(function () {
    $('#container').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: 'Browser market shares at a specific website, 2014'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'Browser share',
            data: [
                ['Firefox',   45.0],
                ['IE',       26.8],
                {
                    name: 'Chrome',
                    y: 12.8,
                    sliced: true,
                    selected: true
                },
                ['Safari',    8.5],
                ['Opera',     6.2],
                ['Others',   0.7]
            ]
        }]
    });
});

var chart1 = new Highcharts.Chart({
                chart: {
                    renderTo: "container1",
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false,
                },
                title: {
                    text: '集团分子公司人员组成'
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.y}</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                            style: {
                                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                            }

                        },
                        //showInLegend: true
                    }
                },
                series: [{
                    type: 'pie',
                    name: '人员数量',
                    data: []
                }]
            });

//通过Ajax获取图表1数据
            $.ajaxSettings.async = false;
            var data1 = [];
            $.getJSON("/User/GetCompanyUserCountJson", function (dict) {                
                for (var key in dict) {
                    if (dict.hasOwnProperty(key)) {
                        data1.push([key, dict[key]]);
                    }
                };
                chart1.series[0].setData(data1);
            });

<div class="box">
                                 <div class="box-title">
                                     <div style="float: left">
                                         <img src="~/Content/JqueryEasyUI/themes/icons/customed/user.png" alt="" width="20" height="20" />
                                         图表1
                                     </div>
                                     <div style="float: right; padding-right: 10px;">更多</div>
                                 </div>
                                 <div class="box-content" style="height: 310px">
                                     <div id="container1" style="height: 300px;max-width:500px"></div>
                                 </div>
                             </div>

// Apply the theme
var highchartsOptions = Highcharts.setOptions(Highcharts.theme);

//汉化图表菜单
Highcharts.setOptions({
    lang: {
        contextButtonTitle: "图表菜单",
        printChart: "打印图片",
        downloadJPEG: "下载JPEG 图片",
        downloadPDF: "下载PDF文档",
        downloadPNG: "下载PNG 图片",
        downloadSVG: "下载SVG 矢量图",
        exportButtonTitle: "导出图片"
    }
});