使用第三方图表工具chart.js

来源：互联网发布：淘宝天猫运营工作内容编辑：程序博客网时间：2024/06/16 05:12

<!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>

阅读全文

0 0