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

方法一：通过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. dedecms _ 栏目无法更新

    dedecms 后台_  栏目无法更新: 那天我在移站,  出现了这个问题 例如这样的提示: 遇到问题咱就得解决啊: 解决方法如下: 进入dedecms后台 进入----系统-----系统基本参数-- ...

  2. PHP学习系列（1）——字符串处理函数（5）

    31.ord() 函数返回字符串第一个字符的 ASCII 值. 语法:ord(string) 例子 <?php echo ord("h"); echo ord("h ...

  3. table-cell的手机应用场景

    前言 最近在前端观察看见了这篇老文章,看见了元素居中的5种办法,其中提到了display:table-cell这个css显示的新属性,按照当时的浏览器市场来说想必兼容性会是糟糕的一比,但是现在这坛老酒 ...

  4. HTML&CSS基础学习笔记1.14—有序列表及列表嵌套

    我们上篇讲到了无序列表,那么今天就来看看有序列表和他们的组合嵌套使用吧. 有序列表 现在我们要做那堆杂事了,但是发现这么多杂事,先做哪个好呢?于是我们给这堆杂事弄个优先级排序,让我们能够按照顺序做下去 ...

  5. Unity脚本的生命周期中几个重要的方法

    1.function Update () {} 正常更新,用于更新逻辑.此方法每帧都会由系统自动调用一次.2.function LateUpdate () {} 推迟更新,此方法在Update() 方 ...

  6. Leetcode：LRUCache四个版本实现

    题目 Design and implement a data structure for Least Recently Used (LRU) cache. It should support the ...

  7. linq 跨库查询

    可以用多个DBContext,例如有DBContext1和DBContext2,但是不能将两个DBContext用在同一个查询中,可以分开,先用一个查出结果集1,再在第二个查询中使用结果集1就可以了

  8. SQL 连接 JOIN 例解。（左连接，右连接，全连接，内连接，交叉连接，自连接）

    SQL 连接 JOIN 例解.(左连接,右连接,全连接,内连接,交叉连接,自连接) 最近公司在招人,同事问了几个自认为数据库可以的应聘者关于库连接的问题,回答不尽理想-现在在这写写关于它们的作用假设有 ...

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

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

  10. Delphi 把字符串读到流中的操作。

    var FReQuestM := TMemoryStream FReQuestM.Write(PChar(FcVoucherXML)^, Length(FcVoucherXML)); 这样就读到流中了 ...