首页 > 代码库 > Highcharts实例

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>

 

Highcharts实例