您的位置：首页 > Web前端 > JavaScript

Chart.js绘图，折线图、柱状图

2015-06-17 15:12 549 查看

出处：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绘图，折线图、柱状图

先来看看我们即将要做的折线图、柱状图：

下面，给出HTML、CSS等代码：<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" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0" /> <meta content="telephone=no,email=no" name="format-detection" /> <title>Chart Demo</title> <style type="text/css"> 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> </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）：图表在手机上可以用手指拖动。

经验内容仅供参考，如果您需解决具体问题(尤其法律、医学等领域)，建议您详细咨询相关领域专业人士。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航