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

方法一：通过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. 网狐6603 cocos2dx 棋牌、捕鱼、休闲类游戏《李逵捕鱼》手机端完整源码分析及分享

    该资源说明: cocos2d 棋牌.捕鱼.休闲类游戏<李逵捕鱼>手机端完整源码,网狐6603配套手机版源码,可以选桌子,适合新手学习参考,小编已亲测试,绝对完整可编译手机端,下载后将文件考 ...

  2. 《图解CSS3》——笔记（一）

    作者:大漠 勘误:http://www.w3cplus.com/book-comment.html 2014年7月14日14:46:35 第一章  揭开CSS3的面纱 1.1  什么是CSS3 CSS ...

  3. NAMESPACE

    限定作用域,比类高,比文件低. cpp 和 h 里面都要用到.

  4. C程序设计语言练习题1-8

    练习1-8 编写一个统计空格.制表符与换行符个数的程序. 代码如下: #include <stdio.h> // 包含标准库的信息. int main() // 定义名为main的函数,它 ...

  5. 使用iText生成带底图的PDF

    package com.wzh.itext; import com.itextpdf.text.Chunk; import com.itextpdf.text.Document; import com ...

  6. MYSQL错误解决：ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock' (2)

    ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock' ( ...

  7. 宏汇编软件MASM51的使用

    单片机开发可以用手工汇编和机器汇编两种方法.采用手工汇编就是先编写出汇编程序,然后对照单片机汇编表手工将汇编程序翻译成机器码,最后将机器码一个一个地送入开发仿真器的RAM中去进行调试. 由于采用手工汇 ...

  8. RazorPad中的ModelProvider

    在RazorPad的右侧 我们可以提供模型的结构,Json数据结构体 当提供多个的时候 是Json中的数组 [{     Name: "NI" }, {     Name: &qu ...

  9. 【转】精简深拷贝ArrayList实例

    原文网址:http://gghhgame51333.blog.51cto.com/138362/289383 精简深拷贝ArrayList实例(包括递归和序列化方法) 2007-07-12 16:50 ...

  10. Android Animations简介

    一 .Animations简介 Animations提供了一系列的动画效果,这些效果可以应用于绝大多数的控件: 二.Animations的分类 第一类:TweenedAnimations,该类Anim ...