Highcharts实例 | 易学教程

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
    <head>
        <title>Highcharts Example</title>
        <script type="text/javascript" src="<%=request.getContextPath() %>/script/jquery/jquery-1.5.1.min.js"></script>
        <script type="text/javascript" src="<%=request.getContextPath() %>/script/highcharts/highcharts.js"></script>
        <script type="text/javascript" src="<%=request.getContextPath() %>/script/highcharts/exporting.js"></script>
<script type="text/javascript">
     $(document).ready(function(){
        var jsonXDate=[];
        var jsonD1=[];
        var jsonD2=[];
        
        $.ajax({
            url: '/testServlet?command=getScreens1',
            context: document.body,
            success: function(data){
                                
                var screenMap = $.parseJSON(data),
                    screens = screenMap.screens;
                    
                if(screens.length>0){    
                    for(var i=0;i<screens.length;i++){
                        jsonXDate.push(screens[i].name);
                        
                        jsonD1.push(parseInt(screens[i].title));
                    }
                    
                     var chart;
                             
                              chart = new Highcharts.Chart({
                                  chart: {
                                              renderTo: 'container', 
                                              //zoomType: 'xy',
                                              //backgroundColor: '#CCCCCC',
                                             // borderWidth: '1',
                                              //borderRadius: '5',
                                              //plotBackgroundColor: '#DDDDDD',
                                              //plotBorderColor: '#EEEEEE',
                                              reflow: true,
                                              type: 'bar'
                                              //line, spline, area, areaspline, column, bar, pie , scatter
                                          },
                                  
                                              
                                                  
                                  title: {
                                            text: '柱状图'    
                                        },
                                xAxis: {
                                            //categories:  ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
                                            categories:  jsonXDate,
                                            lineWidth: 2,
                                            labels: {  
                                                        rotation: -45, //字体倾斜
                                                        align: 'right',  

                                                        style: { font: 'normal 13px 宋体' }  

                                                        } 
                                                        
                                        },
                                yAxis: {
                                            lineWidth: 2,
                                            title: {
                                                    text : '得分'
                                            }            
                                        },
                                tooltip: {
                                            formatter: function() {
                                                        return '<b>'+ this.x +'</b><br/>'+this.series.name +': '+ Highcharts.numberFormat(this.y, 0); 
                                            }
                                        },
                                plotOptions: {
                                            bar: {
                                                     dataLabels: { 
                                                        enabled: true 
                                            },  
                                            enableMouseTracking: true//是否显示title  
                                                    }    
                                        },
                                series: [{
                                            name: '成绩',
                                            //data: [80, 60, 70, 90]
                                            //data: [jsonD1[0], jsonD1[1], jsonD1[2], jsonD1[3]]
                                            data: jsonD1
                                        },{
                                            name: '次数',
                                            data: [50, 40, 70, 80]
                                            //data: jsonD1
                                        }]
                              });
                }                
              }
              
        });
    });

</script>
    </head>
    <body>

<div id="container"  ></div>
    </body>
</html>
来源：https://www.cnblogs.com/mgzy/p/4015710.html
标签
Highcharts
chart
脚本
screens