文档章节

強大的jQuery Chart组件-Highcharts

李朝强
 李朝强
发布于 2015/03/25 12:51
字数 805
阅读 52
收藏 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

共有 人打赏支持
李朝强
粉丝 84
博文 289
码字总数 148281
作品 0
郑州
产品经理
私信 提问
10 个交互式图形图表的 jQuery 插件

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

oschina
2012/09/17
13.7K
12
15款经典图表软件推荐 创建最漂亮的图表

在这篇文章中,我将列出 图表,图形和数据可视化的最佳软件,从创建基本的2D图表到产生复杂的数据集的数据可视化,这些PHP,Javascript、Flash的图表,对于任何一个严谨的开发者都是必须一览...

老枪
2011/04/05
36.4K
21
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

没有更多内容

加载失败,请刷新页面

加载更多

day02:管道符、shell及环境变量

1、管道符:"|" 用于将前一个指令的输出作为后一个指令的输入,且管道符后面跟的是命令(针对文档的操作):cat less head tail grep cut sort wc uniq tee tr split sed awk等) [root@localho...

芬野de博客
12分钟前
4
0
Kubernetes系列——Kubernetes 组件、对象(二)

一、Kubernetes 组件 介绍了Kubernetes集群所需的各种二进制组件。 Master 组件 Master组件提供集群的管理控制中心。Master组件可以在集群中任何节点上运行。但是为了简单起见,通常在一...

吴伟祥
22分钟前
4
0
Flink-数据流编程模型

1、抽象等级 Flink提供了不同级别的抽象来开发流/批处理应用程序。 1) 低层级的抽象 最低层次的抽象仅仅提供有状态流。它通过Process函数嵌入到DataStream API中。它允许用户自由地处理来自一...

liwei2000
39分钟前
5
0
Java开发Swing实战JFrame和JTabbedPane容器的用法详细解析

概述: 项目是一个桌面程序,涉及标签和按钮组件、布局管理器组件、面板组件、列表框和下拉框组件等组件,以及Swing事件处理机制。 下面先从最基础的界面开始。 /** * @author: lishuai * @...

金铭鼎IT教育
45分钟前
14
0
flask 之旅

环境 为了正确地跑起来,你的应用需要依赖许多不同的软件。 就算是再怎么否认这一点的人,也无法否认至少需要依赖Flask本身。 你的应用的运行环境,在当你想要让它跑起来时,是至关重要的。 ...

hblt-j
45分钟前
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部