教你使用HighCharts框架显示报表

原创 2016年08月31日 11:43:03
<html>
<head>
   <meta charset="UTF-8" />
   <title>Highcharts </title>
   <script src="jquery.min.js"></script>
   <script src="highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {
   var title = {
       text: '月平均气温'   
   };
   var subtitle = {
        text: 'Source: runoob.com'
   };
   var xAxis = {
       categories: ['一月', '二月', '三月', '四月', '五月', '六月'
              ,'七月', '八月', '九月', '十月', '十一月', '十二月']
   };
   var yAxis = {
      title: {
         text: 'Temperature (\xB0C)'
      },
      plotLines: [{
         value: 0,
         width: 1,
         color: '#808080'
      }]
   };   

   var tooltip = {
      valueSuffix: '\xB0C'
   }

   var legend = {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'middle',
      borderWidth: 0
   };

   var series =  [
      {
         name: 'Tokyo',
         data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,
            26.5, 23.3, 18.3, 13.9, 9.6]
      }, 
      {
         name: 'New York',
         data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8,
            24.1, 20.1, 14.1, 8.6, 2.5]
      }, 
      {
         name: 'Berlin',
         data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6,
            17.9, 14.3, 9.0, 3.9, 1.0]
      }, 
      {
         name: 'London',
         data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 
            16.6, 14.2, 10.3, 6.6, 4.8]
      }
   ];

   var json = {};

   json.title = title;
   json.subtitle = subtitle;
   json.xAxis = xAxis;
   json.yAxis = yAxis;
   json.tooltip = tooltip;
   json.legend = legend;
   json.series = series;

   $('#container').highcharts(json);
});
</script>
</body>
</html>

版权声明:本文为博主原创文章,未经博主允许不得转载。

数据可视化框架highcharts使用

charset="UTF-8" /> Highcharts src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> src="ht...
  • JackLiu16
  • JackLiu16
  • 2017年12月28日 18:52
  • 35

【Android-数据报表】初级篇[让Highcharts报表显示在Android屏幕]

Highcharts报表是至今我发现做得z的,当然,可能
  • Gulaer
  • Gulaer
  • 2014年04月25日 14:20
  • 3096

【报表神器】Highcharts统计分析

Highcharts是一个纯的JavaScript图标库,能够很简单便捷的在web网站或是web应用程序添加有交互性的图表。它具有很好的兼容性,对于各个浏览器的兼容,而且对于后台的编码没有限制,可以兼...
  • u010508826
  • u010508826
  • 2016年02月04日 16:27
  • 761

highcharts 图表插件与Struts2结合应用,用图表直观展现后台数据分析结果

Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用。HighCh...
  • u012373405
  • u012373405
  • 2016年05月01日 09:36
  • 1350

HighCharts 图形报表小试

项目需要用到,自己做了一个
  • leiyong0326
  • leiyong0326
  • 2014年07月15日 14:53
  • 948

Highcharts常用图形报表展示

Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用。HighCh...
  • jibaole
  • jibaole
  • 2016年07月26日 10:36
  • 1273

Highcharts ajax获取json对象动态生成报表生成 .

http://blog.csdn.net/wsk7860/article/details/8751061
  • Baple
  • Baple
  • 2014年11月11日 16:23
  • 13864

JQuery_HighCharts生成图形报表_饼状图(模仿后台传送数据 JSON格式)

这几天博主做了个需求,需要将图形统计的数据以报表的形式显示出来: HighChart 功能: Highcharts 云服务提供简单便捷的方法生成可视化图表,用户不再需要编程基础,只需要复制数据即...
  • u010003835
  • u010003835
  • 2016年03月18日 15:50
  • 2522

将Highcharts图表数据生成Table表格

有的时候,我们不仅仅需要漂亮的统计图来显示统计结果,还需要在统计图下方一个表格可以更加直观的展现各类数据。既然统计图都显示出来了,那我们可以根据统计图的各元素生成表格了。   首先,先显示统计图。 ...
  • wade01274536
  • wade01274536
  • 2015年12月28日 15:08
  • 784

使用highcharts来实现报表的展示以及打印和导出功能

项目中引入highchartsjs页面引入处理响应的参数图表的核心代码:    $('#container').highcharts({         chart: {           ...
  • m0_37923316
  • m0_37923316
  • 2017年05月27日 16:35
  • 828
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:教你使用HighCharts框架显示报表
举报原因:
原因补充:

(最多只允许输入30个字)