名詞解釋
Chart.js：是基於html5和canvas的強大圖表插件，支持多樣的圖表形式，柱狀線性餅環極地雷達等等；
canvas：只兼容到IE9
excanvas.js：強大的第三方兼容插件，可以使canvas兼容到IE5
鏈接
代碼實現
第三方引入
<script src="../js/Chart.js?"></script> <!--[if lte IE 8]> <script src="../js//excanvas.js"></script> <script> Chart.defaults.global.animation = false; //這里主要是為<=IE8做降級處理，因為動畫在IE8效果很差 </script> <![endif]-->
css
<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>
html
<body> <div class="container"> <h2 class="chart-title">某品牌汽車銷量走勢</h2> <canvas id="sales-volume-chart"></canvas> <small>單位：萬輛</small> </div> <div class="container"> <h2 class="chart-title">某品牌汽車銷量走勢</h2> <canvas id="sales-volume-bar-chart"></canvas> <small>單位：萬輛</small> </div>
js
<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>
其他
點我：博友探討canvas VS flash Silverlight & 大牛作品