chart.js注意事项

// 在手机测试,canvas中的动画看起来很卡,性能很差

// PC上还不错

if (/Mobile/i.test(navigator.userAgent)) {

//针对手机,性能做一些降级,看起来就不会那么卡了

Chart.defaults.global.animationSteps = Chart.defaults.global.animationSteps / 6

Chart.defaults.global.animationEasing = "linear"

}

附录:

其中用到的软件:

Chart.js框架,版本1.0.2,一个简单、轻量级的绘图框架,基于HTML5 canvas。这个框架能很多种图,折线图、柱状图、玫瑰图等。

excanvas.js,这是一个专门解决canvas IE兼容问题的框架。因为IE9已经支持canvas,所有<=IE8引入这个库就可以了。

兼容性:

因为引入了excanvas.js ,所以,兼容到IE7+,

其他的chrome、android、iOS等浏览器,都是可以兼容的。

页面加入了一些web app的meta,所以对手机的兼容也是不错的:

时间: 2024-10-15 03:26:51

chart.js注意事项的相关文章

Html5之高级-7 HTML5 Chart.js(概述、入门、使用)

一.Chart.js 概述 Chart.js 简介 - Chart.js 是一个简单.面向对象.为设计者和开发者准备的图表绘制工具库 - 官方地址: http://www.chartjs.org/ Chart.js 特点 - 基于 HTML 5 - Chart.js 基于 HTML5 canvas技术,支持所有现代浏览器,并且针对IE7/8提供了降级替代方案 - 简单.灵活 - Chart.js 不依赖任何外部工具库,轻量级(压缩之后仅有4.5k),并且提供了加载外部参数的方法 Chart.js

[转] angular2+highcharts+chart.js

这里是在ionic2下使用highchairs和chart.js的简单示例chartjs部分参考http://www.jianshu.com/p/bc18132da812 1.安装hightcharts npm install highcharts --save typings install dt~highcharts --global --save 2.编辑 html文件在html中添加一个div来显示图表 <ion-content class="about"> <

chart.js简单的图标绘制工具

   前 言 chart.js Chart.js帮你用不同的方式让你的数据变得可视化.每种类型的图表都有动画效果,并且看上去非常棒,即便是在retina屏幕上. Chart.js基于HTML5 canvas技术,支持所有现代浏览器,并且针对IE7/8提供了降级替代方案. Chart.js不依赖任何外部工具库,轻量级(压缩之后仅有4.5k),并且提供了加载外部参数的方法. 1导入Chart.js文件 <script src="Chart.js"></script>

chart.js使用常见问题

Chart.js是一个简单.面向对象.为设计者和开发者准备的图表绘制工具库. 在使用过程中新手可能会遇到很多问题导致图标无法显示.下面我们来看一下在使用过程中可能会遇到的问题. 刚开始用chart.js的新手可能最先使用的就是chart.js的中文文档,根据中文文档所写的操作步骤完成操作. 首先,下载chart.js文件,通常我们从github下载. 初次使用,我们通常会直接点击图片右下角的clone or download直接下载zip文件,然后在解压后的文件中找到chart.js文件,之后引

chart.js

一款基于html5的统计图片插件,它可以简单快捷的制作出多种形状的非常漂亮且直观的统计图,当然,这么实用的工具必须得支持主流的浏览器,后面会说到如何让低版的浏览器也支持.在这里还有一点说明,jQ酷只做与jquery相关的插件或文章,但这个让我破例了,因为它太强大了,虽与jquery没有半毛钱的关系,但还是要拿出来和大家分享下,下面我们来开始使用它. 引入Chart.js <script src="Chart.js"></script 建立HTML <canvas

chart.js图表库案例赏析,饼图添加文字

chart.js图表库案例赏析,饼图添加文字 Chart.js 是一个令人印象深刻的 JavaScript 图表库,建立在 HTML5 Canvas 基础上.目前,它支持6种图表类型(折线图,条形图,雷达图,饼图,柱状图和极地区域区).而且,这是一个独立的包,不依赖第三方 JavaScript 库,小于 5KB. 前天用了一下,由于以前也稍微用过,今天总结了一下(水平有限,如果问题,请不吝赐教): 开发中文文档:http://www.bootcss.com/p/chart.js/docs/ ch

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

chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法,原文: 默认情况下如下图 Y轴并不是从0开始,这样折现图的幅度会很大,不是正常的幅度,解决办法如下, 示例代码: window.onload = function () { var ctx = document.getElementById("canvas").getContext("2d"); window.myLine = new Chart(ctx).Line(lineChartDat

chart.js操作实例(前后台互通)

前提:需要导入chart.js 我的项目环境是:SpringMVC+mongodb SpringMVC的controller层: /** * 查询得到财务信息报表 * @author liupeng * @param request * @return * @throws UnknownHostException * @throws ParseException */ @RequestMapping(value="/innerChartOutForFinal") public Mode

Chart.js演示7种不同的统计图

超酷HTML5 Canvas图表应用Chart.js自定义提示折线 实例代码下载 Java代码   <div class="htmleaf-container"> <div class="htmleaf-content"> <div style="width:30%;margin:0 auto;"> <div> <canvas id="canvas" height=&quo