热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

highcharts前端图表技术

前端报表技术:使用JavaScript生成漂亮图表 百度echarts: http:echarts.baidu.comexamples.html Funsioncharts: ht

前端报表技术:使用 Javascript 生成漂亮图表 
百度 echarts: http://echarts.baidu.com/examples.html 
Funsioncharts : http://www.fusioncharts.com/goodies/fusioncharts-free/ 
Highcharts : 折线图、 区域图、 柱状图、 饼状图 …

下载地址: http://www.highcharts.com/download

1.目录结构(不同版本结构可能有所不同)

highcharts前端图表技术

2.搭建环境

解压文件,在webapp的js下创建和复制highcharts自目录下的js文件

highcharts前端图表技术

 

如果原项目有jquery-1.8.3.js删除它里面的jquery.

3.引入模块

highcharts前端图表技术

highcharts前端图表技术

4.基本知识

highcharts前端图表技术

highcharts前端图表技术

5.入门案例

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>折线图title>
        <script type="text/Javascript" src="js/jquery-1.8.3.js">script>
        <script type="text/Javascript" src="js/highcharts/highcharts.js">script>
        <script type="text/Javascript" src="js/highcharts/modules/exporting.js">script>
        <script type="text/Javascript" src="js/highcharts/highcharts-zh_CN.js">script>
    head>
    <script type="text/Javascript">
        $(function() {
            $('#container').highcharts({  //调用主函数
                title: {  //主标题
                    text: '各城市各月份温度表',
                    align:'center'  //对齐方式,默认居中对齐
                },
                subtitle: {  //子标题
                    text: '数据来源:中国中间气象局',
                    align:'center'  //对齐方式
                },
                exporting:{
                    enabled:true //是否显示‘打印’,'导出'等功能按钮,默认为显示
                },
                xAxis: {  //x坐标轴
                    categories: ['一月', '二月', '三月', '四月', '五月', '六月',
                        '七月', '八月', '九月', '十月', '十一月', '十二月'
                    ]
                },
                yAxis: {  //y坐标轴
                    title: {
                        text: '温度 (°C)'
                    }/*, 不需要
                    plotLines: [{ 
                        value: 0,
                        width: 1, 
                        color: '#808080'
                    }]*/
                },
                tooltip: {  //数据提示框
                    valueSuffix: '°C'
                },
                legend: {  //图例
                    layout: 'vertical',  //位置,"horizontal" 或 "vertical"
                    align: 'right',  //水平对齐方式
                    verticalAlign: 'middle',  //垂直对齐方式
                    borderWidth: 0  //没有边框
                },
                series: [{  //数据内容
                    name: '郑州',
                    data: [17.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
                }, {
                    name: '北京',
                    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: '上海',
                    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: '广州',
                    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>
        <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto">div>
    body>

html>
折线图
推荐阅读
author-avatar
W品书坊之品管理
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有