名词解释
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>