教你使用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报表插件之expoting参数的使用

exporting 参数配置 说明:导出及打印选项 打印导出功能的配置项。 1、buttons:打印和导出按钮设置。其中两个按钮中又有很多样式的设置,具体如下:   (1)expo...

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

项目中引入highchartsjs页面引入处理响应的参数图表的核心代码:    $('#container').highcharts({         chart: { &#...

HighCharts报表之条形统计图

机构推送资源数据分析(有效性)                         $(function () {       ...

javascript图形报表库(Highcharts)

一、前言(Preface) Highcharts是一个非常流行,界面美观的纯Javascript图表库。它主要包括两个部分:Highcharts和Highstock。 Highcharts可以为您的网...

零基础highcharts生成报表-简单应用

1.下载highcharts的js http://www.hcharts.cn/resource/index.php

highcharts动态报表+Json用法

首先第一步:需要添加highcharts.js的jar包        第二步:在页面中加入               &...

【报表神器】Highcharts统计分析

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

Highcharts报表之柱状图

导入highcharts.js、highcharts.src.js、excanvas.compiled.js三个js文件,下面为js部分var chart; function showHighCha...

介绍一款强大牛比的js报表项目 highcharts

有一个很棘手的项目那就是报表统计方面的项目,以前都是做数据的显示统计很少用到图形化的东西,以前要不就是用控件,可是显示的也不是很好看,还是用js完成吧,还是上网找找吧。 牛比的highcharts,这...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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