chart.js绘制移动端图表

最新推荐文章于 2022-10-24 16:41:19 发布
最新推荐文章于 2022-10-24 16:41:19 发布
阅读量7.2k 收藏
点赞数
分类专栏： 前端learn 文章标签： chart.js 移动 

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta name="renderer" content="webkit">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta http-equiv="pragma" content="no-cache" />
<p style="margin-top: 20px; margin-bottom: 20px; padding-top: 0px; padding-bottom: 0px; color: rgb(51, 51, 51); font-family: 'Microsoft Yahei', 微软雅黑, arial, 宋体, sans-serif; font-size: 16px; line-height: 28px; text-align: justify;"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0" /></p><p style="margin-top: 20px; margin-bottom: 20px; padding-top: 0px; padding-bottom: 0px; color: rgb(51, 51, 51); font-family: 'Microsoft Yahei', 微软雅黑, arial, 宋体, sans-serif; font-size: 16px; line-height: 28px; text-align: justify;">    <meta content="telephone=no,email=no" name="format-detection" /></p><p style="margin-top: 20px; margin-bottom: 20px; padding-top: 0px; padding-bottom: 0px; color: rgb(51, 51, 51); font-family: 'Microsoft Yahei', 微软雅黑, arial, 宋体, sans-serif; font-size: 16px; line-height: 28px; text-align: justify;">    <title>Chart Demo</title></p><p style="margin-top: 20px; margin-bottom: 20px; padding-top: 0px; padding-bottom: 0px; color: rgb(51, 51, 51); font-family: 'Microsoft Yahei', 微软雅黑, arial, 宋体, sans-serif; font-size: 16px; line-height: 28px; text-align: justify;">    <style type="text/css"></p>


    

    html,body,h1,h2,h3,h4,h5,h6 {

        margin: 0;

        padding: 0;

    }

    .container {

        max-width: 1020px;

        margin: 0px auto;

        margin-bottom: 80px;

    }

    .chart-wrapper {

        background: #fff;

        padding: 15px;

        max-width: 1020px;

        margin: 0px auto 0px auto;

        box-sizing: border-box;

        overflow: auto;

        /*在手机，支持图表区域的滚动  -webkit-overflow-scrolling: touch*/

        overflow-scrolling: touch;

        -webkit-overflow-scrolling: touch;

    }

    h2 {

        margin: 20px 0px;

    }

    .chart-wrapper canvas {

        min-width: 100%;

        height: 260px;

    }

    .chart-title,

    .chart-wrapper + small {

        margin-left: 15px;

    }

    </style>

    <script src="Chart.js?"></script>

    <!--[if lte IE 8]>

    <script src="ie/excanvas.js"></script>

    <script>

    Chart.defaults.global.animation = false;

    //这里主要是为<=IE8做降级处理，因为动画在IE8效果很差

    </script>

    <![endif]-->

</head>

<body>

    <div class="container">

        <h2 class="chart-title">某品牌汽车销量走势</h2>

        <div class="chart-wrapper">

            <canvas id="sales-volume-chart"></canvas>

        </div>

        <small>单位：万辆</small>

    </div>

    <div class="container">

        <h2 class="chart-title">某品牌汽车销量走势</h2>

        <div class="chart-wrapper">

            <canvas id="sales-volume-bar-chart"></canvas>

        </div>

        <small>单位：万辆</small>

    </div>

</body>

下面是核心的javascript代码：

<script>

    function lineChart() {

        var ctx = document.getElementById('sales-volume-chart').getContext("2d")

        var data = {

            labels: ["2014-10", "2014-11", "2014-12", "2015-1", "2015-2", "2015-3"],

            datasets: [{

                label: "",

                fillColor: "rgba(220,220,220,0.2)",

                strokeColor: "rgba(0,102,51,1)",

                pointColor: "rgba(220,220,220,1)",

                pointStrokeColor: "#339933",

                pointHighlightFill: "#339933",

                pointHighlightStroke: "rgba(220,220,220,1)",

                data: [1.27, 1.30, 1.30, 1.41, 1.04, 1.29]

            }]

        };

        // var salesVolumeChart = new Chart(ctx).Line(data);

        var salesVolumeChart = new Chart(ctx).Line(data, {

            // 小提示的圆角

            // tooltipCornerRadius: 0,

            // 折线的曲线过渡，0是直线，默认0.4是曲线

            bezierCurveTension: 0,

            // bezierCurveTension: 0.4,

            // 关闭曲线功能

            bezierCurve: false,

            // 背景表格显示

            // scaleShowGridLines : false,

            // 点击的小提示

            tooltipTemplate: "<%if (label){%><%=label%> 销量：<%}%><%= value %>万辆",

            //自定义背景小方格、y轴每个格子的单位、起始坐标

            scaleOverride: true,

            scaleSteps: 9.5,

            // scaleStepWidth: Math.ceil(Math.max.apply(null,data.datasets[0].data) / 0.1),

            scaleStepWidth: 0.05,

            scaleStartValue: 1

        });

    }

    function barChart() {

        var ctx = document.getElementById('sales-volume-bar-chart').getContext("2d")

        var data = {

            labels: ["2014-10", "2014-11", "2014-12", "2015-1", "2015-2", "2015-3"],

            datasets: [{

                label: "",

                fillColor: "rgba(153,204,153,0.5)",

                strokeColor: "rgba(0,102,51,1)",

                pointColor: "rgba(220,220,220,1)",

                pointStrokeColor: "#338033",

                pointHighlightFill: "#338033",

                pointHighlightStroke: "rgba(220,220,220,1)",

                data: [1.27, 1.30, 1.30, 1.41, 1.04, 1.29]

            }]

        };

        var salesVolumeChart = new Chart(ctx).Bar(data, {

            // 点击的小提示

            tooltipTemplate: "<%if (label){%><%=label%> 销量：<%}%><%= value %>万辆"

        });

    }

    // 启动

    setTimeout(function() {

        // 避免IE7-8 调用getContext报错，使用setTimeout

        lineChart()

        barChart()

    }, 0)

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

    // PC上还不错

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

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

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

        Chart.defaults.global.animationEasing = "linear"

    }

    </script>

附录：

其中用到的软件：

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

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

这两个库在Github上都有，如图：

兼容性：

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

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

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

手机访问截图（手机型号：Smartisan T1 白色，Android）：

图表在手机上可以用手指拖动。


郭晓小小
关注
专栏目录
Chart.js 饼图
shengyin714959的博客
09-03 187
饼图，或称饼状图，是一个划分为几个扇形的圆形统计图表，用于描述量、频率或百分比之间的相对关系。在饼图中，每个扇区的弧长（以及圆心角和面积）大小为其所表示的数量的比例。这些扇区合在一起刚好是一个完全的圆形。顾名思义，这些扇区拼成了一个切开的饼形图案。饼图属性为 pie ，type 描述了图表类型。
HTML5 进阶（7）—Canvas图表插件 chart.js的基础使用以及其他图表插件推荐
weixin_39141044的博客
10-16 1463
一、chart.js chart.js是简单而灵活的javascript图表插件，底层封装了canvas，而且是复合目前主流的响应式。 官网： http://www.chartjs.org 1.创建一个简单的图表 chart.js目前有两种版本1.0版本和2.0版本，两个版本创建图表的方式有区别。 2.0版本 该方式是2.0版本新增的方式。 有4种方式获取&amp;lt;canvas&amp;gt;元素 var ...
echart图表移动端应用
11-29
手机端应用echart 柱状图 饼图...
Chart.js绘图，折线图、柱状图
weixin_34391854的博客
06-17 521
出处：http://jingyan.baidu.com/article/5d368d1ef536d43f60c0579f.html?st=2&os=0&bd_page_type=1&net_type=2 中文手册：http://www.bootcss.com/p/chart.js/docs/Chart.js绘图，折线图、柱状图先来看看我们即将要做的折线...
使用Chart.js来显示雷达图
最新发布
cybozu的博客
10-24 1070
今天介绍一下如何使用自定义。比如在打开低代码应用的记录详情页面时，如何用雷达图来显示成绩单。※是JavaScript库，除了雷达图，还可创建饼图、折线图、柱形图。
小程序chartjs，小程序折线图图表
03-29
小程序折线图 小程序chartjs 小程序图表
基于Chart.js的折线图例子
09-05
基于Chart.js的折线图例子 点名了创建过程 和特殊数据的注意事项 仿写 柱状图 饼状图 不成问题
实用的Vue.js折线图表插件
10-14
npm install chart.js vue-chartjs ``` 然后，在Vue组件中导入并使用： ```javascript import { Line } from 'vue-chartjs' export default { extends: Line, data() { return { labels: ['January', '...
轻量级的绘制图表js库--Morris.js
热门推荐
sowhat专栏
12-07 1万+
Morris.js 是一个轻量级的 JS 库，使用 jQuery 和 Raphaël 来生成各种时序图。 虽说现在移动手机网络已经到了4G，但是在移动web客户端开发过中，为了达到良好的体验效果，需要考虑很多的因素，比如板式，网速等等，最近有个任务需要在移动端显示标签的内容，所有找js类的开源库，最终选择Morris.js ，一个是小，另外是支持移动包括iso和android，项目地址：点击打开
html5手机端统计图表插件
09-04
1. **Canvas元素**：HTML5的Canvas是实现动态图表的关键，它允许通过JavaScript绘制图形。开发者可以通过API来绘制线条、形状、文本等，构建各种复杂的图表。例如，`Chart.js`是一个轻量级的库，利用Canvas绘制出高...
轻量级web图表js框架
08-19
这是一个简单 面向对象 为设计者和开发者准备的图表绘制工具库 1 基于HTML5 canvas技术 支持所有现代浏览器 并且针对IE7 8提供了降级替代方案 2 不依赖任何外部工具库 轻量级（压缩之后仅有4 5k） 并且提供了加载外部参数的方法 3 帮你用不同的方式让你的数据变得可视化 每种类型的图表都有动画效果 并且看上去非常棒 即便是在retina屏幕上 4 完整的中文API文档 中文 ">这是一个简单 面向对象 为设计者和开发者准备的图表绘制工具库 1 基于HTML5 canvas技术 支持所有现代浏览器 并且针对IE7 8提供了降级替代方案 2 不依赖任何外部工具库 轻量级（压缩之后仅有4 5k） 并且提供了加载外部 [更多]
Echarts实现的折线图
03-28
利用Echarts写的折线图，可以作为你画图的模板哦
Chart.js画曲线图、柱状图、蛛网图、极地区域图、饼图和环形图实例
06-22
Chart.js画曲线图、柱状图、蛛网图、极地区域图、饼图和环形图，很实用，html页面打开就能看效果，在example文件夹下，原网页是 https://github.com/chartjs/Chart.js可自行下载
chart_js_time_samples:使用Chart.js处理时间数据时的样本
05-07
Chart.js时间样本 参考Chart.js，放置与时间数据相关的每个设置项目的实现示例。
关于chartjs 屏幕大小自适应
shmilyhq的博客
04-22 729
html 代码 <div class=""> <div id="popChart" style="width: 100%;height:300px;"></div> </div> 引用 echarts.js <!--echarts--> <script src="/js/chart/echarts.min.js" type="text/javascript"></script> js代码 let system =
小飞鱼开发 图表控件Charts.js入门测试（图文）
小飞鱼通达 二开
12-26 432
作为支持移动端图表的控件，chart是排在前几位的。因为HighChart作为商业软件需要授权收费，而chart.js是完全开源的，所以这里优先选用chart.js。 按照介绍的文档写了第一个测试的例子： <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script> <canvas id="myChart" width="200" height="2
H5 画布创建折线图
baidu_38766543的博客
09-09 1788
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;canvas width=&
新版Chart.js绘制折线图
ll791的博客
07-01 7969
网上的资料都是旧版的 , 遇到了一些坑 首先 定义一个canvas , 如果要设置大小的话得在外面放一个div来控制大小 , 设置宽度会自动设置对应的高度 , 自己设置height无效(此处不知道怎么解决)&lt;div style="width: 1600px"&gt; &lt;canvas id="myChart"&gt;&lt;/canvas&gt; &lt;/div&gt;添加引用...
移动端折线、曲线图表封装
风舞红枫的个人博客
01-07 912
折线、曲线图表封装
Chart.js实现类似图表的甜甜圈图教程
- 在提供的代码片段中，我们看到一个包含`<canvas>`元素的`<div>`，这是Chart.js用来绘制图表的地方。此外，还有按钮用于导航和状态指示器，显示温度状态。 3. Vue组件: - 使用Vue的单文件组件（Single File ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值