文档章节

強大的jQuery Chart组件-Highcharts

李朝强
 李朝强
发布于 2015/03/25 12:51
字数 805
阅读 54
收藏 1

Highcharts是一个制作图表的纯Javascript类库,主要特性如下:

  • 兼容性:兼容当今所有的浏览器,包括iPhone、IE和火狐等等;
  • 对个人用户完全免费;
  • 纯JS,无BS;
  • 支持大部分的图表类型:直线图,曲线图、区域图、区域曲线图、柱状图、饼装图、散布图;
  • 跨语言:不管是PHP、Asp.net还是Java都可以使用,它只需要三个文件:一个是Highcharts的核心文件highcharts.js,还有a canvas emulator for IE和Jquery类库或者MooTools类库;
  • 提示功能:鼠标移动到图表的某一点上有提示信息;
  • 放大功能:选中图表部分放大,近距离观察图表;
  • 易用性:无需要特殊的开发技能,只需要设置一下选项就可以制作适合自己的图表;
  • 时间轴:可以精确到毫秒

    下载插件

    Highcharts下载地址

    http://www.highcharts.com/download

    jquery下载地址

    http://jquery.com/

    本次介绍是把highcharts中的第一个文件拷贝过来,然后把其他的功能加在了这个文件中,然后查询相关资料,导出图片格式不需要连到官方服务器了,只需要在本地就可以。

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="highchart_export_module_asp_net._Default" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Highchart js export module sample</title>
        <!-- 1.引入jquery库 -->
        <script src="Javascript/jquery-1.5.1.js" type="text/javascript"></script>
        <!-- 2.引入highcharts的核心文件 -->
        <script src="http://highcharts.com/js/highcharts.js" type="text/javascript"></script>
        <!-- 3.引入导出需要的js库文件 -->
        <script src="http://highcharts.com/js/modules/exporting.js" type="text/javascript"></script>
    </head>
    <script language="javascript" type="text/javascript">
        var chart;
        $(document).ready(function () {
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container',
                    defaultSeriesType: 'line', //图表类别,可取值有:line、spline、area、areaspline、bar、column等
                    marginRight: 130,
                    marginBottom: 25
                },
                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']//设置x轴的标题
                },
                yAxis: {
                    title: {
                        text: 'Temperature (°C)' //设置y轴的标题
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    formatter: function () {
                        return '<b>' + this.series.name + '</b><br/>' +
                   this.x + ': ' + this.y + '°C';  //鼠标放在数据点的显示信息,但是当设置显示了每个节点的数据项的值时就不会再有这个显示信息
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right', //设置说明文字的文字 left/right/top/
                    verticalAlign: 'top',
                    x: -10,
                    y: 100,
                    borderWidth: 0
                },
                exporting: {
                    enabled: true, //用来设置是否显示‘打印’,'导出'等功能按钮,不设置时默认为显示
                    url: "http://localhost:49394/highcharts_export.aspx" //导出图片的URL,默认导出是需要连到官方网站去的哦
                },
                plotOptions: {
                    line: {
                        dataLabels: {
                            enabled: true //显示每条曲线每个节点的数据项的值
                        },
                        enableMouseTracking: false
                    }
                },
                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]
                }]
            });

        });
        </script>
    <body>
        <form id="form1" runat="server">
        <!--5.导入容器用于显示图表-->
        <div id="container" style="width: 900px;">
        </div>
        </form>
    </body>
    </html>

    image

    导出的图片格式

    image

    可以做到页面展示和导出的图片一致了。

本文转载自:http://www.cnblogs.com/shanyou/archive/2012/08/05/2624282.html

李朝强
粉丝 86
博文 291
码字总数 148281
作品 0
郑州
产品经理
私信 提问
10 个交互式图形图表的 jQuery 插件

jQuery 图表和图形插件可就将简单的数据变成可交互式的、色彩丰富、易于理解的各种图表。本文介绍 10 个 jQuery 的图形图表插件如下: isoChart TufteGraph Google Chart Tools 3D Pie Char...

oschina
2012/09/17
13.7K
12
10+ 个免费的 jQuery 交互式图形图表库

Interactive CSS3 & jQuery Graph Highcharts jqPlot Flot jQuery Sparklines TufteGraph JS Charts gRaphaël Google Chart Tools GraphUp – jQuery Plugin isoChart Source: http://desi......

oschina
2012/09/01
6.6K
11
HTML5拓扑图编辑器项目 - Graph.Editor

拓扑图编辑器介绍 项目地址:https://github.com/samsha/graph.editor 在线演示:http://demo.qunee.com/editor/ Graph.Editor是一款基于HTML5技术的拓补图编辑器,采用jquery插件的形式,是...

nosand
2015/01/17
0
0
Highcharts插件制作中文教程

Highcharts强大的扩展功能,是它深受广大用户喜爱的原因之一。通过使用highcharts api,很多使用者根据自己的需求制作了highcharts插件,实现了各种功能扩展。关于highcharts 中文教程资源已...

咲晚杍
2014/05/20
0
0
几种流行的AJAX框架:jQuery,Mootools,Dojo,Ext JS的对比

轻量级的选择:主要是mootools和jquery,由于它们的设计思想的不同,jQuery是追求简洁和高效,Mootools除了追求 这些目标以外,其核心在于面向对象,所以jQuery适合于快速开发,Mootools适合...

MiniBu
2013/03/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Feign输出Info级别日志

背景   spring cloud netfix组件中,feign相关的日志默认是不会输出的,需要自定义配置才能输出,并且Feign只对Debug基本的日志做出响应, 实际业务需要输出Info级别的日志,所以需要做自定...

xiaomin0322
27分钟前
3
0
面向解决问题的java编程,spring boot,mybatis generator和坑-1starter

1、start一个spring boot项目 第一课我们也不能免俗,要从starter开始,spring boot的起始项目脚手架可以从spring boot官方starter生成地址开始:https://start.spring.io/ 这张图列出了一个...

wphmoon
27分钟前
1
0
Linux虚拟化技术—CentOS7.4下KVM虚拟化一 安装配置及基本操作

Linux虚拟化技术—CentOS7.4下KVM虚拟化一 安装配置及基本操作 0行云流水00人评论61017人阅读2018-04-11 19:57:20 KVM的安装配置与基本操作 目录 第一部分 实验环境 第二部分 安装图形界面 ...

linjin200
30分钟前
3
0
php获取网站favicon.ico图标 api源码

 通常情况下,做网站的都会给自己的网站添加一个Icon,浏览器上一长排的标签页,用Icon来区分就显得更加醒目。现在想找一个没有Icon的网站并不好找,可见没有Icon的网站是多么的业余啊。"什...

xiaogg
33分钟前
1
0
双亲委派的认识

首先JVM中有三种类加载器 Bootstrap启动类加载器 Extension扩展类加载器(ExtClassLoader) System系统类加载器(AppClassLoader) 某个特定的类接到加载类的请求时候,首先将加载任务委托给...

最胖的瘦子
37分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部