hightchars插件

1.曲线图

       
  var chart;
        $(document).ready(function () {line()});
function line()
        {
          var options =
            {
                chart: {
                    renderTo: 'container',          //放置图表的容器
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    defaultSeriesType: 'line'
                },
                title: {
                    text: '<%=titleText %>'
                },
                subtitle: {
                    text: ''
                },
                xAxis: {//X轴数据
                    categories: [<%=xData %>],  //X轴数据，数组形式
                    labels: {
                        rotation: -45, //字体倾斜
                        align: 'right',
                        style: { font: 'normal 13px 宋体' }
                    }
                },
                yAxis: {//Y轴显示文字
                    title: {
                        text: '开服数量'
                    }
                },
                tooltip: {
                    enabled: true,
                    formatter: function () {
                        return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + Highcharts.numberFormat(this.y, 0);
                    }
                },
                plotOptions: {
                    line: {
                        dataLabels: {
                            enabled: true
                        },
                        enableMouseTracking: true//是否显示title
                    }
                },
                series: [
                           <%=yData %> //Y轴数据，数组形式
                       ]
            };
            chart = new Highcharts.Chart(
              options
            );
        }

2.病状图

       
function index() {
       
            var begintime = $("#<%=tbBeginTime.ClientID %>").val();
            var endtime = $("#<%=tbEndTime.ClientID %>").val();
            //Y轴
            var jsondata="";
            $.ajax({
                type: "Get",   //请求的方法
                url: "AjaxHandle/HightChars_Ydata.ashx?type=" + _type + "&r=" + Math.floor(Math.random() * 1000 + 1), //要传递参数使用Ajax进行处理的类名称
                data: { "name": "" + encodeURI(x_Data) + "", 'begintime': "" + begintime + "", "endtime": "" + endtime + "" },
                dataType: "text",   //返回的数据类型
                global: false,  //Ajax的范围
                async: false,   //异步执行
                //成功情况下的处理
                success: function (strReult) {
                    if (strReult == "-1") { alert("请求数据失败!"); return; }
                    datas = [];
                    datas = eval("(" + strReult + ")");
                }, //失败情况下的处理
                error: function () {
                    alert("Ajax请求数据失败!");
                }
            });

                switch (_type)
                        {
                            case "game": typeName = "游戏"; break;
                            case "plat": typeName = "平台"; break;
                            case "developer": typeName = "开发商"; break;
                            case "theme": typeName = "题材"; break;
                            case "type": typeName = "类型"; break;
                            case "picturestyle": typeName = "画面风格"; break;
                            default:
                                break;
                        }
           
          var options =
            {
                chart: {
                    renderTo: 'container',          //放置图表的容器
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    defaultSeriesType: 'column'
                },
                title: {
                    text: '开服柱状图'
                },
                subtitle: {
                    text: ''
                },
                xAxis: {//X轴数据
                    categories: x_Data,
                 
                    labels: {
                        rotation: -45, //字体倾斜
                        align: 'right',
                        style: { font: 'normal 13px 宋体' }
                    }
                },
                yAxis: {//Y轴显示文字
                    title: {
                        text: '开服数量'
                    }
                },
                tooltip: {
                    enabled: true,
                    formatter: function () {
                        return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + Highcharts.numberFormat(this.y, 0);
                    }
                },
                plotOptions: {
                    line: {
                        dataLabels: {
                            enabled: true
                        },
                        enableMouseTracking: true//是否显示title
                    }
                },
                series: [
                         { name: typeName, data: datas }
                       ]
            };
            chart = new Highcharts.Chart(
              options
            );
        }

3.饼图

  function index() {

            var begintime = $("#<%=tbBeginTime.ClientID %>").val();
            var endtime = $("#<%=tbEndTime.ClientID %>").val();
            $.ajax({
                type: "Get",   //请求的方法
                url: "AjaxHandle/HightChar_Pie.ashx?type=" + _type + "&r=" + Math.floor(Math.random() * 1000 + 1), //要传递参数使用Ajax进行处理的类名称
                data: { "name": "" + encodeURI(names) + "", 'begintime': "" + begintime + "", "endtime": "" + endtime + "" },
                dataType: "text",   //返回的数据类型
                global: false,  //Ajax的范围
                async: false,   //异步执行
                //成功情况下的处理
                success: function (strReult) {
                    if (strReult == "-1") { alert("请求数据失败!"); return; }
                    datas = [];
                    datas = eval("(" + strReult + ")");
                }, //失败情况下的处理
                error: function () {
                    alert("Ajax请求数据失败!");
                }
            });


            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container',
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false
                },
                title: {
                    text: '饼状图'
                },
                tooltip: {
                    formatter: function () {
                        return '<b>' + this.point.name + '</b>: ' + Highcharts.numberFormat(this.percentage, 1) + ' %';
                    }
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            color: '#000000',
                            connectorColor: '#000000',
                            formatter: function () {
                                return '<b>' + this.point.name + '</b>: ' + Highcharts.numberFormat(this.percentage, 1) + ' %';
                            }
                        }
                    }
                },
                series: [{
                    type: 'pie',
                    name: 'Browser share',
                    //                    data: [
                    //                        // ['沧海笑', 60.0], { name: '神曲', y: 10.1, sliced: true, selected: true }, ['other', 9.9], ['傲剑', 20.0]
                    //                          ]
                    data: datas
                }]
            });
        }