Chart.js柱形图表

使用CDN:

<link rel="stylesheet" type="text/css" href="http://cdn.staticfile.org/Chart.js/2.8.0-rc.1/Chart.min.css">
<script src="http://cdn.staticfile.org/Chart.js/2.8.0-rc.1/Chart.min.js" type="text/javascript" charset="utf-8"></script>

引用内容:

<canvas id="popChart" ></canvas>

js内容:

<script>
			var popCanvas = $("#popChart");
			var popCanvas = document.getElementById("popChart");
			var popCanvas = document.getElementById("popChart").getContext("2d");
			var barChart = new Chart(popCanvas, {
				type: 'bar',
				data: {
					labels: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
					datasets: [{
						label: '图例名',
						data: [100, 80, 75, 90, 78, 75,80],
						backgroundColor: [
						'rgba(255, 99, 132, 0.6)',
						'rgba(54, 162, 235, 0.6)',
						'rgba(255, 206, 86, 0.6)',
						'rgba(75, 192, 192, 0.6)',
						'rgba(153, 102, 255, 0.6)',
						'rgba(255, 159, 64, 0.6)',
						'rgba(255, 99, 120, 0.6)',
						'rgba(54, 162, 235, 0.6)',
						'rgba(255, 206, 86, 0.6)',
						'rgba(75, 192, 192, 0.6)',
						],
					}
					],
				},
				options:{
					legend:{
						display:false,
					},
					scales:{
						yAxes:[{
							ticks:{
								beginAtZero:true,
							}
						}]
					},
					tooltips: {
						cornerRadius: 0,
						caretSize: 0,
						xPadding: 16,
						yPadding: 10,
						backgroundColor: 'rgba(0, 150, 100, 0.9)',
						titleFontStyle: 'normal',
						titleMarginBottom: 15
					}
				}
			});
		</script>

图例:
在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值