您的位置：首页 > Web前端 > javascript > 正文

使用HighCharts制作图表

更多时间：2015-4-6 类别：Web前端浏览量：1313

使用HighCharts制作图表

使用HighCharts制作图表

一、什么是Highcharts

1、Highcharts是一个非常流行，界面美观的纯Javascript图表库。它主要包括两个部分：Highcharts和Highstock。

2、Highcharts可以为您的网站或Web应用程序提供直观，互动式的图表。目前支持线，样条，面积，areaspline，柱形图，条形图，饼图和散点图类型。

3、Highstock可以为您方便地建立股票或一般的时间轴图表。它包括先进的导航选项，预设的日期范围，日期选择器，滚动和平移等等。

二、HighCharts的主要特性

1、兼容性：HighCharts采用纯JavaScript编写，兼容当今大部分的浏览器，包括Safari、IE和火狐等等；

2、图表类型：HighCharts支持图表类型，包括曲线图、区域图、柱状图、饼状图、散状点图和综合图表等等，可以满足各种需求。

3、不受语言约束：HighCharts可以在大多数的WEB开发中使用，并且对个人用户免费，支持ASP，PHP，JAVA，.NET等多种语言中使用。

4、提示功能：HighCharts生成的图表中，可以设置在数据点上显示提示效果，即将鼠标移动到某个数据点上，可以显示该点的详细数据，并且可以对显示效果进行设置。

5、放大功能：HighCharts可以大量数据集中显示，并且可以放大某一部分的图形，将图表的精度增大，进行详细的显示，可以选择横向或者纵向放大。

6、时间轴：可以精确到毫秒。

7、主题多、操作简单

三、Highcharts的安装

1、Highcharts沿用jQuery,MooTool以及Prototype等Javascript框架来处理基本的Javascript任务。

因此,在使用Highcharts之前，需要在页面头部引用这些脚本文件。如果你使用jQuery作为基本框架，那么你需要在页面头部同时引用jQuery和Hightcharts两个文件。

例如


<script src="/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="/js/highcharts.js" type="text/javascript"></script>

当我们使用MooTool等其他JS框架时，需要单独引用适配器(adapter)脚本文件

例如


<script src="/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js" type="text/javascript"></script>
<script src="/js/adapters/mootools-adapter.js" type="text/javascript"></script>
<script src="/js/highcharts.js" type="text/javascript"></script>

2、在您的网页头部的脚本标签，或在一个单独的js文件，添加JavaScript代码来初始化图表。renderTo参数用来设置图表渲染的位置，一般来说是一个具有ID的li元素

例如

JScript 代码复制


var chart1; // 全局变量
$(document).ready(function() ...{
      chart1 = new Highcharts.Chart(...{
         chart: ...{
            renderTo: 'container',
            type: 'bar'
         },
         title: ...{
            text: 'Fruit Consumption'
         },
         xAxis: ...{
            categories: ['Apples', 'Bananas', 'Oranges']
         },
         yAxis: ...{
            title: ...{
               text: 'Fruit eaten'
            }
         },
         series: [...{
            name: 'Jane',
            data: [1, 0, 4]
         }, ...{
            name: 'John',
            data: [5, 7, 3]
         }]
      });
   });

上述代码适用于使用jQuery作为基本框架的情况，$(document).ready()函数，表示在文档加载完成后进行相应处理。如果你使用MooTool等其他JS框架，需要使用相对应的代码来替代$(document).ready()函数。

如果你想生成HighStock图表，有一个单独的构造方法调用Highcharts.StockChart。在这些图表中，数据源是一个典型的JavaScript数组数据。其来源可以是一个单独的JavaScript文件，或者是通过Ajax调用远程服务器提供的数据。

JScript 代码复制


var chart1; // 全局变量
$(document).ready(function() ...{
      chart1 = new Highcharts.StockChart(...{
         chart: ...{
            renderTo: 'container'
         },
         rangeSelector: ...{
            selected: 1
         },
         series: [...{
            name: 'USD to EUR',
            data: usdtoeur // 数组变量
         }]
      });
   });

3、在页面中添加一个li元素，作为放置Highcharts图表的容器。需要为其设置ID值，与第2步rendTo参数绑定。设置的宽度和高度将作为Highcharts图表的宽度和高度。


<li id="container" style="width: 100%; height: 400px"></li>

4、你可以通过Highcharts.setOptions方法为Highcharts图表设置一个全局的主题（可选的）。下载包含有四个预定义的主题，如果你需要使用从这些主题，只需在 highcharts.js 后引用这些文件。比如：


<script type="text/javascript" src="/js/themes/gray.js"></script>

标签：JS制作图表

上一篇：SCOPE_IDENTITY的用法

下一篇：contenttype类型

您可能感兴趣

使用HighCharts制作图表

使用HighCharts制作图表

热门推荐

排行榜