出處:http://jingyan.baidu.com/article/5d368d1ef536d43f60c0579f.html?st=2&os=0&bd_page_type=1&net_type=2 javascript
中文手冊:http://www.bootcss.com/p/chart.js/docs/css
Chart.js繪圖,折線圖、柱狀圖html
先來看看咱們即將要作的折線圖、柱狀圖:java
下面,給出HTML、CSS等代碼:android
<head>web
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />chrome
<meta name="renderer" content="webkit">canvas
<meta http-equiv="X-UA-Compatible" content="IE=edge">瀏覽器
<meta http-equiv="pragma" content="no-cache" />app
<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>
<!--[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):
圖表在手機上能夠用手指拖動。
經驗內容僅供參考,若是您需解決具體問題(尤爲法律、醫學等領域),建議您詳細諮詢相關領域專業人士。