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

方法一：通过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. destoon系统商城加淘宝客按钮方法

    destoon系统很多喜欢运营B2B的站长都在用,其中的商城模块常常被用来做淘宝客,其中的难点是如何把购买按钮做成淘宝客地址,这个问题的修改在论坛上被叫价50元,下面小编把这个实用的方法分享下,希望对 ...

  2. python 解决递归调用栈溢出

    递归函数 2578次阅读 在函数内部,可以调用其他函数.如果一个函数在内部调用自身本身,这个函数就是递归函数. 举个例子,我们来计算阶乘n! = 1 x 2 x 3 x ... x n,用函数fact ...

  3. linux内核学习之三：linux中的"32位"与"64位"

    在通用PC领域,不论是windows还是linux界,我们都会经常听到"32位"与"64位"的说法,类似的还有"x86"与"x86 ...

  4. qt http 上传文件

    //Qt文件 QFile file("1.jpg"); if(!file.open (QIODevice::ReadOnly)){     qDebug()<<&quo ...

  5. 关于iostream的效率问题

    前言    经常有人说iostream的速度慢,IO流比stdio的慢多了.但是有人测试过的,iostream的速度是超过stdio的. 测试结果 /* C */#include <stdio. ...

  6. 如何将android studio项目转换成eclipse

    更新:虽然本人坚守eclipse很久,但是现在我也不再推荐继续用eclispe了,自己的项目用还没什么问题,但是你如果想用github上的项目,用eclispe会越来越难.如果你仍然感兴趣,继续看下面 ...

  7. 华为u8800怎样root?

    用SuperOneClick就可以root了 .在手机上面进入设置-应用程序-开发-三个都要勾选.用数据线连接到电脑,确认可正常连接.不行就使用豌豆夹连接,豌豆夹会自动帮你安装手机的驱动.运行Supe ...

  8. cf492B Vanya and Lanterns

    B. Vanya and Lanterns time limit per test 1 second memory limit per test 256 megabytes input standar ...

  9. Centos 6.5中安装后不能打开emacs的问题

    问题的发现过程: 安装了最新的centos版本后发现居然打不开emacs,然后在终端中输入emacs后还是不能打开,出现了下面的提示: emacs: error while loading share ...

  10. c语言指针点滴1

    #include <stdio.h> #include <stdlib.h> void main() { int *p = NULL;//指针开始最好都初始化为空 if(p = ...