<!doctype html>

<html lang="zh">

    <head>

        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

        <script type="text/javascript" src="js/jquery-1.8.3.js"></script>

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

        <script type="text/javascript" src="js/modules/data.js"></script>

        <script type="text/javascript">

            $(document).ready(function(){

                changeChart('line');

                $("button.btnChart").click(function(){

                    var type = $(this).html();

                    changeChart(type);

                });

                $('.datatableClass tr:gt(0)').mouseover(function(){

                    $(this).addClass('over');

                }).mouseout(function(){

                    $(this).removeClass('over');

                });

                $('.datatableClass tr:gt(0):even').addClass('even');

                function changeChart(type){

                    $('#container').highcharts( {

                    data:{

                        table: document.getElementById('datatableId')

                    },

                    chart:{

                        type:type

                    },

                    plotOptions:{

                        pie:{

                            showInLegend:true

                        }

                    },

                    credits:{

                        enabled:true,

                        href:'http://www.cnblogs.com/xiaoxian1369/p/3777526.html',

                        text:'qingyezhu'

                    },

                    title:{

                        text:'<b>将表格转化为不同的图</b>'

                    },

                    yAxis:{

                        allowDecimals:false,

                        title:{

                            text:'单位'

                        }

                    },

                    tooltip:{

                        pointFormat:'{series.name}:<b>{point.y}</b>'

                    }

                });

                }

            });

        </script>

        <style type="text/css">

            table.datatableClass{

                border-width:1px;

                border-color:#dddddd;

                border-collapse:collapse;

                color:#333333;

                font-size:11px;

                font-family:verdana,arial,sans-serif,'微软雅黑';

            }

            table.datatableClass th,table.datatableClass td{

                border-width:1px;

                border-style:solid;

                border-color:#dddddd;

                padding:8px;

                width:200px;

            }

            tr.even{

                background:#F9F9F9;

            }

            tr.over{

                background:#F5F5F5;

            }

        </style>

    </head>

    <body>

        <div>

            <button class="btnChart">line</button>

            <button class="btnChart">spline</button>

            <button class="btnChart">pie</button>

            <button class="btnChart">area</button>

            <button class="btnChart">column</button>

            <button class="btnChart">areaspline</button>

            <button class="btnChart">bar</button>

            <button class="btnChart">scatter</button>

        </div>

        <div id="container" style="width:800px;height:400px;margin:0 auto;"></div>

        <div>

            <table id="datatableId" class="datatableClass">

                <thead>

                    <tr>

                        <th></th>

                        <th>Jane</th>

                        <th>John</th>

                    </tr>

                </thead>

                <tbody>

                    <tr>

                        <th>Apples</th>

                        <td>3</td>

                        <td>4</td>

                    </tr>

                    <tr>

                        <th>Pears</th>

                        <td>2</td>

                        <td>0</td>

                    </tr>

                    <tr>

                        <th>Plums</th>

                        <td>5</td>

                        <td>11</td>

                    </tr>

                    <tr>

                        <th>Bananas</th>

                        <td>1</td>

                        <td>1</td>

                    </tr>

                    <tr>

                        <th>Oranges</th>

                        <td>2</td>

                        <td>4</td>

                    </tr>

                </tbody>

            </table>

        </div>

    </body>

</html>

highcharts 根据表格转化为不同的图表的更多相关文章

  1. Highcharts使用表格数据绘制图表

    Highcharts使用表格数据绘制图表 在Highcharts中,同意用户使用网页中现有的表格数据作为数据来源,然后依据该数据来源绘制图表.对于一个典型的HTML表格.当中,第一列的数据会作为x轴刻 ...

  2. [笔记]学习HighCharts的使用（不错的web图表插件）

    最近有一个小项目需要用到折线图.到处请教了一下,有人给我推荐了highcharts.感觉还不错,就稍微学习下.这里记录一下学习的过程. 网上相关的内容还不少,我就说一下我学习的内容. 看的第一篇文章& ...

  3. Highcharts报表——让你的网页上图表画的飞起

    Highcharts是一款纯javascript编写的图表库,能够很简单便捷的在Web网站或Web应用中添加交互性的图表,Highcharts目前支持直线图.曲线图.面积图.柱状图.饼图.散点图等多达 ...

  4. 【JAVA】JSP+layui框架 静态表格转化成数据表格

    <table lay-filter="demo" class="layui-table" id="excTable"> < ...

  5. R语言：表格的线图转化

    R语言:表格的线图转化 最先选取的是北京各区普通住宅成交十年(2016年及2006年)涨幅对比.这张图比较plain,主要拿来练习: 1.数据表格的基本整理及计算 2. 数据的初步分析 3.线图的基本 ...

  6. Highcharts结合PhantomJS在服务端生成高质量的图表图片

    项目背景 最近忙着给部门开发一套交互式的报表系统,来替换原有的静态报表系统. 老系统是基于dotnetCHARTING开发的,dotnetCHARTING的优势是图表类型丰富,接口调用简单,使用时只需 ...

  7. 基于MVC4+EasyUI的Web开发框架经验总结（4）--使用图表控件Highcharts

    在我们做各种应用的时候,我们可能都会使用到图表统计,以前接触过一些不同的图表控件,在无意中发现了图表控件Highcharts,其强大的功能和丰富的互动效果,令人难以忘怀.本篇主要介绍在Web开发中使用 ...

  8. Highcharts可拖动式图表

    Highcharts可拖动式图表 默认情况下,Highcharts依据给定的数据列生成图表. 浏览者是无法改动图表的. 假设浏览者须要手动调整数据节点.就须要借助第三方插件Draggable Poin ...

  9. HighCharts 图表高度动态调整

    HighCharts 图表高度动态调整 前言 在使用HighCharts控件过程中,发现图表可以自适应div的高度,无法根据图表x.y轴的数量动态调整div高度,否则图标挤在一起,看起来非常不美观,也 ...

随机推荐

  1. JavaScript 函数的执行过程

    每一个JavaScript函数都是Function对象的一个实例, 它有一个仅供JavaScript引擎存取的内部属性[[Scope]]. 这个[[Scope]]存储着一个作用域的集合, 这个集合就叫 ...

  2. java web中Jdbc访问数据库步骤通俗解释（吃饭），与MVC的通俗解释（做饭）

    一.Jdbc访问数据库步骤通俗解释(吃饭) 1)加载驱动 Class.forName(“com.microsoft.jdbc.sqlserver.SQLServer”); 2) 与数据库建立连接 Co ...

  3. [转]主键冲突的话就更新否则插入 （ON DUPLICATE KEY UPDATE ）

    mysql "ON DUPLICATE KEY UPDATE" 语法如果在INSERT语句末尾指定了ON DUPLICATE KEY UPDATE,并且插入行后会导致在一个UNIQ ...

  4. JS中的！=、== 、！==、===的用法和区别。

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 var num = 1;   var str = '1';   var test = 1;   t ...

  5. 彻底删除sql server的方法

    请先确定是否把sql相关的东西删了,建议进行如下操作. 1.先下个Windows Install Clean Up,清理sql相关东西,要全部清理. 2.到控制面板--添加删除程序中看是否还有未删的. ...

  6. mcrypt加密与解密

    $key = 'test'; $result_array = array('name' => 'ta', 'age' => 28); $str = encode($result_array ...

  7. [大牛翻译系列]Hadoop系列性能部分完结

    Hadoop系列性能部分完结.其它的部分发布时间待定. Hadoop系列将不再一日一篇,开始不定期发布.

  8. sirius的python学习笔记（1）

    1.可以通过try...except语句来简单的判断字符串是否为整数值,如例程 x = raw_input('>') try: print int(x) except ValueError: r ...

  9. JS和JSP的区别

    最近很多同学在纠结于名词缩写之间的相似性,因此本人也来写一篇,讲讲JS和JSP的区别. SUN首先发展出SERVLET,其功能比较强劲,体系设计也很先进,只是,它输出HTML语句还是采用了老的CGI方 ...

  10. dom树的介绍，及原理分析

    三.解析和DOM树的构建 1.解析: 由于解析渲染引擎是一个非常重要的过程,我们将会一步步的深入,现在让我们来介绍解析. 解析一个文档,意味着把它转换为一个有意义的结构——代码可以了解和使用的东西,解 ...