本文主要是介绍使用第三方图表工具chart.js，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
text-align:center;
}
canvas{
background:#efefef;
margin:0 auto;
}
</style>
</head>
<body>
<h1>使用第三方图表工具Chart.js</h1>
<h3>可绘制8种图（修改type值可得）</h3>
<!--画布的宽和高只能使用属性，不能用样式 -->
<h1>柱状图</h1>
<canvas id="ca" width="500" height="400"></canvas>
<script src="//cdn.bootcss.com/Chart.js/2.4.0/Chart.bundle.js"></script>
<script>
new Chart(ca,{
type:"polarArea",//line(曲线图)/bar(柱状图)/radar(雷达图或蛛网图)/polarArea(极地区域图)/pie(饼图)/doughnut(环形图)/
data:{
labels:['方案一','方案二','方案三','方案四','方案五','方案六','方案七'],
datasets:[{
label:'预计方案',
data:[3,4,7,6.5,6,8,6.5],
backgroundColor:[
'rgba(255,99,132,0.2)',
'rgba(55,162,235,0.2)',
'rgba(255,206,86,0.2)',
'rgba(75,192,192,0.2)',
'rgba(153,102,255,0.2)',
'rgba(255,159,64,0.2)',
'rgba(175,92,102,0.2)',
],
borderColor:[
'rgba(255,99,132,1)',
'rgba(55,162,235,1)',
'rgba(255,206,86,1)',
'rgba(75,192,192,1)',
'rgba(153,102,255,1)',
'rgba(255,159,64,1)',
'rgba(175,92,102,1)',
],
borderWidth:1,
}]
},
options: {
responsive:false,//取消响应式
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
</script>
</body>
</html>
这篇关于使用第三方图表工具chart.js的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
