`

转载：HighCharts入门

 
阅读更多

转载：http://hbiao68.iteye.com/blog/1835578

HighCharts入门

博客分类：
 

一、什么是HighCharts

1、HighCharts是网页报表工具，开发语言是Javascript

2、HighCharts是一个简单易用、美观、跨平台、跨浏览器的图表工具

3、HighCharts支持图表的类型有：曲线图、柱状图、饼状图、区域图、散点图、综合图的各种图表需求。

 

直线图——line

折线图——spline

柱状图——column

饼状图——pie

区域图——area

综合图——more

 

一、你必须知道的

1、首先，HighCharts是基于Jquery框架开发的，所以需要在页面引入Jquery，具体代码是：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

 

2、其次，需要引入HighCharts js文件

<script src="http://code.highcharts.com/highcharts.js"></script>

    引入HighCharts js文件还可以是拷贝下载下来的Highcharts资源包中的js目录下的highcharts.js文件

 

3、如果你想使用导出功能，必须引入导出相关的js文件，该文件存在与/Highcharts-2.3.5/js/modules/目录下

<script src="http://code.highcharts.com/modules/exporting.js"></script>

   引入下面的三个资源文件后，你就可以参考API文档进行开发了

 

 

 

HighCharts 图表属性——chart

HighCharts 颜色属性——colors

HighCharts 版权属性——credits

HighCharts 导出属性——explorting

HighCharts HTML标签——labels

HighCharts 语言属性——lang

HighCharts 图例属性——legengd

HighCharts 加载属性——loading

HighCharts 导出按钮属性——navigation

HighCharts 数据点属性——plotOptions

HighCharts 数据列属性——series

HighCharts 标题和副标题——title subtitle

HighCharts 数据点提示框——tooltip

HighCharts X轴和Y轴——xAxis yAxis

 

Html代码  收藏代码
  1. <html>  
  2.     <head>  
  3.         <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
  4.         <script type="text/javascript" src="../jquery-1.4.4.js"></script>  
  5.         <script type="text/javascript">  
  6.             $(function () {  
  7.             var chart;   
  8.             $(document).ready(function() {  
  9.                 chart = new Highcharts.Chart({  
  10.                 //HighCharts中chart属性配置  
  11.                   chart: {  
  12.                     renderTo: 'container',//div 标签  
  13.                     type: 'line',//图表类型  
  14.                       
  15.                     /******************以下chart配置可选******************/  
  16.                     backgroundColor:"#EAF7FF",//图表背景色  
  17.                     borderWidth:5,//图表边框宽度  
  18.                     borderRadius:15,//图表边框圆角角度  
  19.                     plotBackgroundColor:"#6DBFBB",//主图表区背景颜色  
  20.                     plotBorderColor:'red',//主图表边框颜色  
  21.                     plotBorderWidth:2,//主图表边框宽度  
  22.                     shadow:true,//是否设置阴影  
  23.                     zoomType:'xy'//拖动鼠标放大图表的方向  
  24.                   },  
  25.                    credits : {  
  26.                         //enable:true,默认就为true，可以不配置  
  27.                         //如果想要去除版权（也就是不显示），只需要设置enable:false即可  
  28.                         href:'http://www.52wulian.org',//链接地址  
  29.                         position: {                        //文字的位置  
  30.                             x:-30,  
  31.                             y:-30  
  32.                         },  
  33.                         style:{                            //文字的样式  
  34.                             color:'red',  
  35.                             fontWeight:'bold'  
  36.                         },  
  37.                         enabled:true,//不显示highCharts版权信息,不显示为false  
  38.                         text:'我爱物联网'                //文字  
  39.                   },  
  40.                   /******************  
  41.                   **Colors-颜色属性为可选配置  
  42.                   **通过配置配置colors，可以轻松的设置数据列的颜色  
  43.                   1、颜色代码可以是十六进制，也可以是英文单词，  
  44.                     还可以是RGB，如同css  
  45.                     2、默认是从第一个数据列起调用第一个颜色代码，  
  46.                     有多少个数据列调用相应数量的颜色  
  47.                     3、当数据列大于默认颜色数量时，重复从第一个  
  48.                     颜色看是调用  
  49.                   ******************/  
  50.                   colors:[  
  51.                     '#000000',//黑  
  52.                     '#FF0000',//红  
  53.                     '#00FF00',//绿  
  54.                     '#0000FF',//蓝  
  55.                     '#FFFF00',//黄  
  56.                     '#FF00FF',//紫  
  57.                     '#FFFFFF',//紫  
  58.                   ],  
  59.                   exporting: {  
  60.                     //enabled:true,默认为可用，当设置为false时，图表的打印及导出功能失效  
  61.                     buttons:{    //配置按钮选项  
  62.                         printButton:{    //配置打印按钮  
  63.                             width:50,  
  64.                             symbolSize:20,  
  65.                             borderWidth:2,  
  66.                             borderRadius:0,  
  67.                             hoverBorderColor:'red',  
  68.                             height:30,  
  69.                             symbolX:25,  
  70.                             symbolY:15,  
  71.                             x:-200,  
  72.                             y:20  
  73.                         },  
  74.                         exportButton:{    //配置导出按钮  
  75.                             width:50,  
  76.                             symbolSize:20,  
  77.                             borderWidth:2,  
  78.                             borderRadius:0,  
  79.                             hoverBorderColor:'red',  
  80.                             height:30,  
  81.                             symbolX:25,  
  82.                             symbolY:15,  
  83.                             x:-150,  
  84.                             y:20  
  85.                         }  
  86.                     },  
  87.                     filename:'52wulian.org',//导出的文件名  
  88.                     type:'image/png',//导出的文件类型  
  89.                     width:800    //导出的文件宽度  
  90.                   },  
  91.                   labels:{  
  92.                       items:[{  
  93.                         //标签代码（html代码）  
  94.                         html:'<p style="font-size:20">Copyright © 2012-2013 </p><a href="http://www.52wulian.org" style="font-size:20;text-decoration: underline;">我爱物联网</a>',  
  95.                         style:{ //设置标签位置  
  96.                                 left:'100px',  
  97.                                 top:'50px'  
  98.                         }  
  99.                     }],  
  100.                       style:{    //设置标签颜色  
  101.                           color:'rgb(0,0,255)'  
  102.                       }  
  103.                   },  
  104.                   xAxis: {  
  105.                         categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',  
  106.                             'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']  
  107.                     },       
  108.                   series: [{  
  109.                         name: 'Tokyo',  
  110.                         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]  
  111.                     }, {  
  112.                         name: 'New York',  
  113.                         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]  
  114.                     }, {  
  115.                         name: 'Berlin',  
  116.                         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]  
  117.                     }, {  
  118.                         name: 'London',  
  119.                         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]  
  120.                     }]  
  121.                 });  
  122.             });  
  123.         });  
  124.         </script>  
  125.     </head>  
  126.     <body>  
  127.         <script src="../highcharts.js"></script>  
  128.         <script src="../exporting.js"></script>  
  129.         <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>  
  130.     </body>  
  131. </html>  
分享到：
| EasyUI图表插件 Highcharts 饼形，折线， ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Highcharts-4.0.4中文api和demo

    Highcharts-4.0.4含中文API,Highcharts 是一个用纯JavaScript编写的一个图表库,HighCharts特点:1.兼容性：HighCharts采用纯JavaScript编写，兼容当今大部分的浏览器，包括Safari、IE和火狐等等； 2.图表类型众多：...

    Highcharts-4.0.4含中文API

    Highcharts-4.0.4含中文API,Highcharts 是一个用纯JavaScript编写的一个图表库,HighCharts特点:1.兼容性：HighCharts采用纯JavaScript编写，兼容当今大部分的浏览器，包括Safari、IE和火狐等等； 2.图表类型众多：...

    Highcharts在油田生产日报系统中的应用.pdf

    Highcharts 在油田生产日报系统中的应用 概述： Highcharts 是一种流行的图表库，广泛应用于 web 开发和移动应用开发中。在油田生产日报系统中，Highcharts 被用于设计和实现图表功能，提高了系统的交互性和可视化...

    highcharts

    Highcharts是一款基于JavaScript的开源图表库，用于创建高质量的数据可视化效果。它以其简洁的API、丰富的图表类型和高度自定义的特性，在Web开发领域中深受喜爱。以下是对Highcharts相关知识点的详细介绍： 1. **...

    Highcharts-2.3.5

    Highcharts是一款强大的JavaScript图表库，用于在Web页面上创建各种互动式图表。它以其灵活性、易用性和丰富的功能集而闻名。"Highcharts-2.3.5"是该库的一个特定版本，发布于某个时间点，可能包含了当时最新的特性...

    毕业设计2 用highcharts做的图表

    【标题】：“毕业设计2 用highcharts做的图表” 【描述】：“这个是隔壁的组做的，用highcharts做了一个显示图标的” 【标签】：“毕业设计” 在毕业设计项目中，采用Highcharts库来创建数据可视化图表是一种常见...

    highcharts示例代码（官方例子）

    Highcharts是一款广泛应用于Web开发中的JavaScript图表库，它能够帮助开发者轻松创建出各种美观且功能丰富的图表，包括折线图、柱状图、饼图、散点图等。这款库以其易用性、灵活性和高性能著称，适用于数据可视化的...

    HighCharts示例图

    HighCharts是一款强大的JavaScript图表库，用于在Web应用中创建交互式的、高质量的数据可视化效果。它以其易用性、灵活性和丰富的图表类型而受到广大开发者喜爱。"HighCharts示例图"是官方提供的一系列演示，涵盖了...

    Highcharts5.0.2

    **Highcharts 5.0.2 知识点详解** Highcharts是一款强大的JavaScript图表库，专为Web应用程序设计，用于创建各种数据可视化效果。在5.0.2这个版本中，它提供了丰富的图表类型，包括折线图、柱状图、饼图、散点图、...

    Highcharts

    Highcharts是一款广泛应用于Web开发中的JavaScript图表库，它允许开发者创建动态、交互式的图表和图形。在"Highcharts-4.0.4"这个版本中，我们关注的是Highcharts的第4.0.4次更新，它包含了各种性能优化和新功能的...

    Learning Highcharts

    1. **官方文档与示例**：Highcharts官方网站提供了详尽的文档和丰富的示例代码，是初学者入门的最佳起点。 2. **在线课程与教程**：许多在线教育平台如Udemy、Coursera等提供针对Highcharts的课程，适合不同水平的...

    Highcharts使用说明中文WORD版

    资源名称：Highcharts使用说明 中文WORD版内容简介：Highcharts是一个跨浏览器的Javaｓｃｒｉｐｔ图表控件，支持柱状图、趋势图、面积图、饼图、环形图、组合图、堆积图、散点图。Highcharts图表的基本功能，只需要...

    highcharts demo

    Highcharts 是一款强大的JavaScript图表库，它用于在Web页面上创建动态、交互式的图表和图形。这个"highcharts demo"的压缩包很可能包含了各种类型的Highcharts图表示例，帮助用户了解和学习如何使用这个库来展示...

    Highcharts-7.0.3.zip

    Highcharts 是一个强大的JavaScript库，专门用于创建高质量的数据可视化图表。在"Highcharts-7.0.3.zip"这个压缩包中，包含了该库的7.0.3版本，这是一次更新，可能包含了性能优化、新功能或者对现有功能的改进。下面...

    highcharts相关js

    Highcharts是一款强大的JavaScript图表库，用于在Web页面上创建各种互动式图表，如折线图、柱状图、饼图、散点图等。它基于SVG（ Scalable Vector Graphics）技术，同时也支持旧版浏览器通过VML（Vector Markup ...

    Highcharts-3.0.6统计图表多种示例

    Highcharts是一款广泛应用于Web开发中的JavaScript图表库，它允许开发者创建出丰富、互动且美观的统计图表。在3.0.6版本中，这个库提供了多种图表类型，包括柱状图、折线图、饼图、散点图、面积图等，能够满足不同...

    highcharts图表插件（中文包和本地下载）

    Highcharts是一款广泛应用于Web开发中的JavaScript图表库，它能够帮助开发者轻松创建各种类型的交互式图表，包括折线图、柱状图、饼图、散点图等，为数据可视化提供了强大的支持。本压缩包资源主要包含以下几个核心...

Magicbox
Global site tag (gtag.js) - Google Analytics