今天想到要研究下“用图表的形式来呈现数据”这个主题。对比了下两种实现的方法:

方法一：通过php代码在服务器端生成图像，再将图像传回客户端。使用jpGraph类库。

方法二：通过js和html5技术，在html中的canvas标记中作图。使用chartjs插件。http://www.chartjs.org

还是感觉第两种方法比较好，理由：

1.有交互。鼠标移上去，可以提示。

2.更简单。

3.在客户端运行，减轻服务器端的压力。

数据画图 jpgraph & chart.js的更多相关文章

  1. 数据可视化(1)--Chart.js

    Chart.js是一个HTML5图表库,使用canvas元素来展示各式各样的客户端图表,支持折线图.柱形图.雷达图.饼图.环形图等.在每种图表中,还包含了大量的自定义选项,包括动画展示形式. Char ...

  2. 关于chart.js 设置canvas的宽度为父级元素的宽度的百分百 以及 X轴上面刻度数据太多如何处理

    今天在做一个数据统计的界面的时候,需要做折线统计图,在网上找了一圈发现数据统计的插件还是不少的,本着轻量级的的原则选择了Chart.js,后来在做的过程中便遇到两个问题,以此记录下来,和刚刚接触前端的 ...

  3. chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法[bubuko.com]

    chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法,原文:http://bubuko.com/infodetail-328671.html 默认情况下如下图 Y轴并不是从0开始 ...

  4. Chart.js Y轴数据以百分比展示

    新手一枚,解决的问题喜欢记录,也许正好有人在网上迷茫的百度着.-0- 最近使用Chart.js做折线图的报表展示,直接显示整数啥的很好弄毕竟例子直接在哪里可以用,百分比就没办法了.百度慢慢汲取营养,虽 ...

  5. chart.js 示例

    一个简单的例子. 1.html代码 <div id="pie" style="width: 250px;float:left"> <h3> ...

  6. JS组件系列——开源免费图表组件：Chart.js

    前言:最近被开源免费得有点上火了,各种组件首先想到的就是是开源否.是否免费.是否和bootstrap风格一致.想着以后做报表肯定要用到图表组件的,于是在Bootstrap中文网上面找到了Chart.j ...

  7. Ionic中使用Chart.js进行图表展示以及在iOS/Android中的性能差异

    Angular Chart 简介 在之前的文章中介绍了使用 Ionic 开发跨平台(iOS & Android)应用中遇到的一些问题的解决方案. 在更新0.1.3版本的过程中遇到了需要使用图表 ...

  8. chart.js接口开发：X轴步长和Labels旋转角

    一. 当初为什么选择chart.js 当初项目使用库是Zepto,Zepto能支持的chart处理库太少.也是为了使得项目比较轻量化,所以选择了chart.js. 但是最后的显示结果实在太差,放弃了c ...

  9. chart.js在html中画曲线图

    http://www.bootcss.com/p/chart.js/docs/ http://www.chartjs.org/docs/   中有详细讲解 一.简介 Chart.js是一个基于HTML ...

随机推荐

  1. CentOS 5设置服务器hostname、DNS和IP

    CentOS 5如何设置服务器主机名.DNS?设置主机名hostname编辑/etc/hostname文件写入:116.23.14.25 centostest.com其中116.23.14.25 表示 ...

  2. uC/OS-II中的时间 （转）

    时间是一个非常重要的概念,我们和朋友出去游玩需要约定一个时间,做事情也需要花费一段时间,总之,我们的生活离不开时间.操作系统也一样,也需要一个时间来规范其任务的执行. 我们生活中,时间的最小单位是秒, ...

  3. javascript 数组slice和splice

    var a = [1,4,2,5,6,9,10];console.log(a.slice(3)); //[5,6,9,10]console.log(a.slice(-3)); //[6,9,10]co ...

  4. Linux企业级项目实践之网络爬虫（8）——认识URL

    URL是Uniform Resource Location的缩写,译为"统一资源定位符".也可以说,URL是Internet上用来描述信息资源的字符串,主要用在各种WWW客户程序和 ...

  5. Windows Azure 存储管理器 (2014)

     Windows Azure存储用户经常希望能够在"管理器"中查看他们的数据,管理器指的是一款可用于显示存储帐户数据的工具.我们之前提供了我们所知的存储管理器列表.在本文中,我 ...

  6. POJ 3378

    题目链接 查找长度为5的上升序列总数 用的树状数组+高精度 用树状数组求在i前面比i小的数有几个 用的4个树状数组,A[i][j]表示长度为i的以j为结尾的个数,A[i][j]=A[i-1][1... ...

  7. Android Studio：You need to use a Theme.AppCompat theme (or descendant) with this activity. AlertDialog

    学习<第一行代码>的时候遇到的问题. Process: com.example.sevenun.littledemo, PID: 2085 java.lang.RuntimeExcepti ...

  8. JAVA并发实现五(生产者和消费者模式wait和notify方式实现)

    package com.subject01; import java.util.PriorityQueue; /** * 通过wait和notify 实现 * 生产者-消费者模型:当队列满时,生产者需 ...

  9. python高级编程：有用的设计模式3

    # -*- coding: utf-8 -*-__author__ = 'Administrator'#python高级编程:有用的设计模式#访问者:有助于将算法从数据结构中分离出来"&qu ...

  10. Laravel 4 Blade模板引擎

    http://my.oschina.net/5say/blog/201290 模板输出 基本输出 1 <!-- app/views/example.blade.php --> 2 < ...