Highcharts图表插件的简单使用说明

Posted claireyuancy

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Highcharts图表插件的简单使用说明相关的知识,希望对你有一定的参考价值。

         Highcharts图表控件是眼下使用最为广泛的图表控件。本文将从零開始逐步为你介绍Highcharts图表控件。

通过本文。你将学会怎样配置Highcharts以及动态生成Highchart图表。


         Highcharts是一个很流行。界面美观的纯javascript图表库。它主要包含两个部分:Highcharts和Highstock。  Highcharts能够为您的站点或Web应用程序提供直观,互动式的图表。

眼下支持线,样条。面积,areaspline,柱形图。条形图,饼图和散点图类型。  Highstock能够为您方便地建立股票或一般的时间轴图表。它包含先进的导航选项,预设的日期范围。日期选择器,滚动和平移等等。

       Highcharts简单案例:

       页面index.html代码

<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>数据统计</title>

<body>
	<div class="depmeting_charts" style="width: 100%; height: 400px"></div>
</body>
<script src="../js/jquery-1.10.2.js"></script>
<script src="../js/highcharts/highcharts.js"></script>
<script src="../js/leaddesktop/data.js"></script>
</html>
          data.js的代码:

$(function () {
    $('.depmeting_charts').highcharts({
        title: {
            text: 'Monthly Average Temperature',
            x: -20 //center
        },
        subtitle: {
            text: 'Source: WorldClimate.com',
            x: -20
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Temperature (°C)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '°C'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        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]
        }]
    });
});
生成的页面效果:
技术分享

         Highcharts有一个类似bootstrap的站点,我们仅仅须要拷贝对应的代码,即能够实现我们想要的效果:

         Highcharts的中文案例站点:http://www.hcharts.cn/demo/index.php
         Highstock的中文案例站点:http://www.hcharts.cn/demo/highstock.php

         本文也是起到一个抛砖引玉的作用。假设想深入研究Highcharts。能够參考一下两个站点:

         http://www.highcharts.com/

         http://www.hcharts.cn/






以上是关于Highcharts图表插件的简单使用说明的主要内容,如果未能解决你的问题,请参考以下文章

highcharts的简单使用

图表插件Highcharts的动态化赋值,实现图表数据的动态化设置显示

Highcharts可拖动式图表

Highcharts图表的注解功能

Highchart插件简介和引入方式

Highcharts.js -纯javasctipt图表库初体验