完整Highchart JS示例

线性：

   $.ajax({
        type:'post',
        url:appPages.urlListTjrll,
        cache:false,
        data:{year:year,month:month},//
        //dataType:'json',//
        async:false,
        success:function(data){
            var strJson = $.parseJSON(data);
            //alert(strJson.clientList.length)
            
            var vip_custom=strJson.clientList.vip_no;
            var pt_custom=strJson.clientList.vip_mark;

            if(strJson.clientList.length == 0){
                $("#container").html("无数据");
            }else{     
                $('#container').highcharts({
                    chart: {
                        type: 'pie',
                        options3d: {
                            enabled: true,
                            alpha: 45,
                            beta: 0
                        },
                        backgroundColor:'#0C2B2D',
                    },
                   //去掉LOGO 
                   credits: {
                        enabled: false
                   },
                   //去掉导出按钮 
                   exporting:{
                        enabled:false
                    },
                    title: {
                        text: year +'年'+ month +'月 人流量统计',
                        style: {
                            color: '#71F5FF',//颜色
                            fontSize:'14px'  //字体
                        }
                    },
                    
                    tooltip: {
                        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            depth: 35,
                            dataLabels: {
                                enabled: true,
                                format: '{point.name}',
                                color:'#71F6FF',
                            }
                        }
                    },
                    series: [{
                        type: 'pie',
                        name: year +'年'+ month +'月人流量统计',
                        data: [
                            ['特殊客户('+vip_custom+")人", parseInt(vip_custom)],
                            ['普通客户('+pt_custom+")人",parseInt(pt_custom)]
                        ]
                    }]
                });
                
            }
        }
    });

饼状：

    $.ajax({
        type:'post',
        url:appPages.urlListTjrllfs,
        cache:false,
        data:{year:year,month:month,day:day},//
        //dataType:'json',//
        async:false,
        success:function(data){
        
            var strJson = $.parseJSON(data);
            
            //alert(strJson.clientList.length)
            
            var vip_guid = strJson.clientList[0].vip_guid;
            var pic_id = strJson.clientList[0].pic_id;
            var vip_id = strJson.clientList[0].vip_id;
            var vip_flag = strJson.clientList[0].vip_flag;
            var vip_name = strJson.clientList[0].vip_name;
            var vip_sex = strJson.clientList[0].vip_sex;
            var vip_pic_id = strJson.clientList[0].vip_pic_id;
            var vip_pic_file_name = strJson.clientList[0].vip_pic_file_name;
            var is_new = strJson.clientList[0].is_new;
            var vip_ctype = strJson.clientList[0].vip_ctype;
            var vip_no = strJson.clientList[0].vip_no;
            var vip_tel = strJson.clientList[0].vip_tel;
            
            var vip_guid_pt = strJson.clientList[1].vip_guid;
            var pic_id_pt = strJson.clientList[1].pic_id;
            var vip_id_pt = strJson.clientList[1].vip_id;
            var vip_flag_pt = strJson.clientList[1].vip_flag;
            var vip_name_pt = strJson.clientList[1].vip_name;
            var vip_sex_pt = strJson.clientList[1].vip_sex;
            var vip_pic_id_pt = strJson.clientList[1].vip_pic_id;
            var vip_pic_file_name_pt = strJson.clientList[1].vip_pic_file_name;
            var is_new_pt = strJson.clientList[1].is_new;
            var vip_ctype_pt = strJson.clientList[1].vip_ctype;
            var vip_no_pt = strJson.clientList[1].vip_no;
            var vip_tel_pt = strJson.clientList[1].vip_tel;



            if(strJson.clientList.length == 0){
                $("#container1").html("无数据");
            }else{     
                $('#container1').highcharts({
                    chart: {
                        type: 'spline',
                        backgroundColor: '#0C2B2D',
                        colors:"#000000",
                    },
                   credits: {
                        enabled: false
                   },
                   exporting:{
                        enabled:false
                    },
                    legend: {
                        //图例样式 
                                itemStyle:{
                                        color: '#71F5FF',//颜色
                                        fontSize:'14px',  //字体
                                            backgroundColor: '#ffffff'
                                },
                                //图例选中样式 
                                 itemHoverStyle: {
                                        color: '#7CB5EC'
                                    }
                    },
                    title: {
                        text:''+ year +'年'+ month +'月'+ day +'日 人流量分时统计',
                            style: {
                                color: '#71F5FF',//颜色
                                fontSize:'14px'  //字体
                            }
                    },
                   /*  subtitle: {
                        text: ''+ year +'年'+ month +'月'+ day +'日',
                        style: {
                            color: '#71F5FF',//颜色
                            fontSize:'12px'  //字体
                        }
                    }, */
                    xAxis: {
                            lineWidth: 1,
                            lineColor: "#71F5FF",
                            tickWidth: 0,
                            labels: {
                                y: 20, //x轴刻度往下移动20px
                                style: {
                                    color: '#71F5FF',//颜色
                                    fontSize:'14px'  //字体
                                }
                            },
                        categories: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00',
                            '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '23:59']
                    },
                    yAxis: {
                        gridLineColor: '#71F5FF',
                        title: {
                            text: '分时人流量统计',
                            style: {
                                color: '#71F5FF',//颜色
                                fontSize:'12px'  //字体
                            }
                        },
                        labels: {
                            formatter: function () {
                                return this.value;
                            },
                            style: {
                                color: '#71F5FF',//颜色
                                fontSize:'14px'  //字体
                            }
                        }
                    },
                    //配色方案
                    colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', 
                             '#FFF263', '#6AF9C4'] ,
                    tooltip: {
                        crosshairs: true,
                        shared: false
                    },
                    plotOptions: {
                        spline: {
                            marker: {
                                radius: 4,
                                lineColor: '#000000',
                                lineWidth: 1,
                            }
                        }
                    },
                    series: [{
                        name: '特殊客户',
                        marker: {
                            symbol: 'square'
                        },
                        data: [parseInt(vip_guid),
                               parseInt(pic_id), 
                               parseInt(vip_id),
                               parseInt(vip_flag), 
                               parseInt(vip_name),
                               parseInt(vip_sex),
                               parseInt(vip_pic_id),
                               parseInt(vip_pic_file_name),
                               parseInt(is_new),
                               parseInt(vip_ctype), 
                               parseInt(vip_no),
                               parseInt(vip_tel),parseInt(vip_guid)]
                    }, {
                        name: '普通客户',
                        marker: {
                            symbol: 'diamond'
                        },
                        data: [parseInt(vip_guid_pt), 
                               parseInt(pic_id_pt), 
                               parseInt(vip_id_pt), 
                               parseInt(vip_flag_pt), 
                               parseInt(vip_name_pt), 
                               parseInt(vip_sex_pt), 
                               parseInt(vip_pic_id_pt), 
                               parseInt(vip_pic_file_name_pt), 
                               parseInt(is_new_pt), 
                               parseInt(vip_ctype_pt), 
                               parseInt(vip_no_pt), 
                               parseInt(vip_tel_pt),parseInt(vip_guid_pt)]
                    }]
                });
                
            }
        }
    });