JavaScript中的图标库Chart.js代码实例
程序员文章站
2022-08-04 13:34:05
值得一提的是 在chartjs中 方法的命名一般都是驼峰式
值得一提的是 在chartjs中 方法的命名一般都是驼峰式
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>chart.js</title>
<!-- 引入chartjs以及bootstrapcdn -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.7.0/chart.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<!-- 定义存储图表的对象 -->
<p class="container">
<canvas id="mychart"></canvas>
</p>
<script>
// 返回对象上绘图的环境
let mychart = document.getelementbyid("mychart").getcontext("2d");
// 配置全局默认信息
chart.defaults.global.defaultfontfamily = 'lato';
chart.defaults.global.defaultfontsize = 18;
chart.defaults.global.defaultfontcolor = '#777';
// 实例化chart对象 chart(存到哪里,配置)
let chart = new chart(mychart,{
type : 'bar',//图形类型
data : {//图形数据
labels : ["北京","深圳","广州","上海","杭州","成都"],//各个分类
datasets : [{
label : "工作热度值",//功能描述
data : [617594,124532,456786,765432,568934,923456],//每个分类对应的值
backgroundcolor : [//图形背景颜色
`rgba(255,99,132,.6)`,
"rgba(54,162,235,.6)",
"rgba(255,206,86,.6)",
"rgba(75,102,192,.6)",
"rgba(173,102,255,.6)",
"rgba(255,159,64,.6)",
],
// 添加边框
borderwidth : 1,
bordercolor : '#777',
hoverborderwidth : 3,
hoverbordercolor : '#eee'
}]
},
options : {//配置样式
title : {//标题
display : true,
text : "在中国",
fontsize : 25,
},
legend : {//功能描述的样式设置
display :true,
position : 'right',
labels : {
fontcolor : "#000",
}
},
layout : {//位置调整
padding : {
left : 50,
right : 0,
bottom : 0,
top : 0
}
},
tooltips : {//hover 是否展示信息
enabled :true
}
}
})
</script>
</body>
</html> 上一篇： C# 网络编程之简易聊天示例
下一篇： HTML布局原理