`

转载：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使用说明中文WORD版

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

    Highcharts参考手册

    资源名称：Highcharts参考手册内容简介：Highcharts 是一个用纯Javaｓｃｒｉｐｔ编写的一个图表库。Highcharts 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表。本文给大家带来Highcharts参考手册，...

    java8看不到源码-highcharts-downsample:Highcharts的下采样插件

    看不到源码highcharts-downsample：Highcharts 的下采样插件 添加一名作者 特别感谢：和 这个插件用于在渲染图表之前对数据进行下采样。 目的是尝试使用相当少的数据点保留原始线的视觉特征。 该插件中使用的算法...

    highcharts-react:Highcharts官方支持的React包装器

    入门 一般先决条件 确保您的节点， NPM和React是最新的。 经过测试和要求的版本： node 8.11.3+ npm 6.4.1+或类似的软件包管理器 此包装器还需要高图，并在您的项目中安装以下版本的程序包时对其进行响应： ...

    Highcharts2.2.1

    Highcharts2.2.1 JQuery柱形，线形图、饼图、插件和使用实例Demo

    vue3-highcharts:Highcharts.js的Vue 3组件包装器

    Vue 3-Highcharts JS 一个简单，快速的Vue 3组件，用于呈现使用composition API编写的Highcharts.js图表​​。 演示 最低要求 Vue@3.0.0 Highcharts@8.0.0（较旧的版本可能有效，但未经测试） Vue和Highcharts未...

    highcharts-angular:Highcharts Angular官方包装

    入门 一般先决条件 确保您具有最新的node ， NPM和Angular 。 经过测试和要求的版本： 节点6.10.2+ npm 4.6.1+ @ angular / cli 6.0.0+ 正在安装 在您的Angular应用中从NPM获取软件包： npm install ...

    pywws-highcharts:Highcharts 渲染 pywws 数据

    在 highcharts 中呈现的 pywws 图表 这是我在用来生成天气图的代码。 点击查看截图，或为我的活生生的例子。 气象站插入 Linux 机器，该机器运行以将数据从 USB 线上拉出并通过一系列模板运行。 我只是定义了几个...

    highcharts：Highcharts JS，JavaScript图表框架

    Highcharts JS是一个基于SVGJavaScript图表库，具有对旧浏览器的VML和canvas的后备功能。 官方网站： 下载页面： 许可： 支持： 问题： 下载并安装Highcharts 这是Highcharts的工作库。 如果您只是想将...

    react-highcharts：Highcharts库的React包装器

    React-Highcharts存储库本身是MIT许可的，但是请注意，此模块取决于Highcharts.js。 对于商业用途，您需要有效的。 用法 Webpack /浏览器修饰 npm install react-highcharts highcharts react --save const React =...

    highchartsjs:Highcharts v 2.3.5 版本

    highchartsjs Highcharts v 2.3.5 版本 Bower 2.3.5 版安装了很多东西（演示、非压缩文件等）。 所以我们只是编译它们并创建了这个存储库。

    highcharts-dist:Highcharts发布的官方Shim回购

    Highcharts是基于SVGJavaScript图表库，具有针对旧浏览器的VML和canvas的后备。 该软件包还包含Highstock，财务图表软件包和用于地理地图的Highmap。 该软件包旨在通过Parcel或Webpack等捆绑程序以及Babel或...

    highcharts_trendline:HighCharts 散点图演示，包括一条趋势线

    Highcharts 趋势线示例 该项目说明了如何轻松地向图表添加趋势线。 注意：如果您正在寻找更完整的实现，请 。 用法 将regression.js脚本包含到您HTML 页面中。 给定您的源数据数组，提供一个调用fitData().data的...

    highcharts:Highcharts JS 的 Shim 存储库

    高图 Highcharts JS 的 Shim 存储库

    highcharts-sandbox:Highcharts 图表库的实验

    highcharts-沙盒 Highcharts 图表库的实验

    highcharts-axis-labels-shorten:Highcharts 的 XAxis 标签缩短和标签跳过插件

    highcharts-axis-labels-shorten 这是一个用于 Highcharts 的插件，用于缩短 x 轴上的标签并在标签过多时跳过一些标签。 跳过和缩短标签时，插件会尊重字体系列和字体大小设置。 免责声明：此插件仅适用于 svg ...

    使用Highcharts快速开发报表中文WORD版

    资源名称：使用Highcharts快速开发报表 中文WORD版内容简介：Highcharts是一个纯Javaｓｃｒｉｐｔ编写的图表库，它提供了一个将交互式的图表添加到您的网站或Web应用程序的简单方法。 Highcharts目前支持折线图，...

    highcharts-assignment-8:Highcharts的课堂作业

    Highcharts和JavaScript（作业8） 此存储库包含您的作业入门文件，包括Highcharts代码。 分叉此仓库（确保您已登录GitHub）。 克隆新的存储库，以便将其存储在硬盘上。 请记住将其保存到用于保存本课程所有项目的...

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