<%@ 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实例的更多相关文章

  1. highcharts实例教程二：结合php与mysql生成饼图

    上回我们分析了用highcharts结合php和mysql生成折线图的实例,这次我们以技术cto网站搜索引擎流量为例利用highcharts生成饼图. 饼图通常用在我们需要直观地显示各个部分所占的比例 ...

  2. highcharts 实例

    <script src="../../Scripts/jquery-1.7.2.min.js" type="text/javascript">< ...

  3. highcharts实例教程一：结合php与mysql生成折线图

    Highcharts是一款纯javascript和html5编写的图表库,不仅几乎能兼容所有pc浏览器,而且对ios和android手机端的兼容 性也不错,它能够很简单便捷的在Web网站或Web应用中 ...

  4. highcharts与highstock实例

    highcharts实例代码 <head> <title>highcharts报表示例</title> <meta http-equiv="Cont ...

  5. HighCharts学习笔记（一）HighCharts入门

    一.HighCharts简介 Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站 ...

  6. 网页图表Highcharts实践教程之图表代码构成

    网页图表Highcharts实践教程之图表代码构成 Highcharts第一个实例 下面我们来实现本书的第一个Highcharts实例. [实例1-1]下面来制作北京连续一周最高温度折线图.操作过程如 ...

  7. Highcharts的自适应DOM或者DIV，JS方法实现

    那我们就按照官网的一分钟极速入门代码来说 // 图表配置 var options = { chart: { type: 'bar' //指定图表的类型,默认是折线图(line) }, title: { ...

  8. 最近学习工作流 推荐一个activiti 的教程文档

    全文地址:http://www.mossle.com/docs/activiti/ Activiti 5.15 用户手册 Table of Contents 1. 简介 协议 下载 源码 必要的软件 ...

  9. highcharts 使用实例

    后端使用django实现,返回的数据可以修改为从数据库获取或其他方式获取,实例里是写死的数据. urls配置: url(r'^outip/chart/$', views.charts), url(r' ...

随机推荐

  1. 最全的ASP.NET开源CMS汇总

    转载:http://www.cnblogs.com/cxd4321/archive/2011/11/16/2250707.html 国内: 1.SiteServer CMS SiteServer CM ...

  2. Android 设计随便说说之简单实践(消息流动)

    在上面两篇分别说明了设计中较为简单也是很关键的实践点. 第一模块划分,它是根据每个模块所承载的业务,进行划分,是应用程序一个静态的描述. 第二合理组合,它是是将每个模块调动起来,共同实现业务,是一个准 ...

  3. C++Primer笔记一

    作为一名半路出家的JAVA程序员,又要开始学半路中放弃的C++了,因为真的很重要. 先来看一段代码,  #include <iostream> using namespace std; i ...

  4. iOS－开发日志－UIButton

    UIButton属性 1.UIButton状态: UIControlStateNormal          // 正常状态    UIControlStateHighlighted     // 高 ...

  5. java I/O技术

    一.流的分类 Java的流类大部分都是由InputStream.OutputStream.Reader和Writer这四个抽象类派生出来的 (1)按数据流向 输入流(InputStream类和Read ...

  6. 09.13日记（2014年9月13日00:18:26）英语，bootstrap，阮一峰，

    我们这里只推荐一本语法书:台湾的旋元佑老师写的<文法俱乐部>(简体版名为<语法俱乐部>).这本书因为出版社倒闭而绝版,淘宝可以买到影印的版本. (1)学英语:奶爸的英语教室 资 ...

  7. IDE开发<LER-Studio>(2)::登录模块

    软件中写登录模块是为了防止软件的恶意传播,内测阶段可以忽略登录. 以下为登录模块主要源代码: void CLoginDlg::OnBnClickedBtnLogin() { // TODO: Add ...

  8. （转）C++静态库与动态库

    转自:http://www.cnblogs.com/skynet/p/3372855.html C++静态库与动态库 这次分享的宗旨是——让大家学会创建与使用静态库.动态库,知道静态库与动态库的区别, ...

  9. 【ADO.NET】1、简单配置与使用

    1.一些基础的知识点 ExecuteReader(); //返回查询到的数据,一次一行,用于 selectExecuteNonQuery(); //返回影响的行数,用于 delete,insert,u ...

  10. 【原创】Linux编译内核

    Linux 编译内核 大致分这几个步骤 1.准备编译工具.内核文件 2.开始编译 3.将编译好的新内核install进系统 4.查看是否成功.   一.准备好必备的库和内核文件   1.添加必备的编译 ...