|
|
|
|
步骤 2 : 垂直 步骤 3 : 水平 步骤 4 : 多数据 步骤 5 : 多轴
接下来演示各种柱状图的常用形态。 我就直接给出代码了，在用的时候，直接复制粘贴，然后修改修改就可以了。
最简单的。。。
<script src="https://how2j.cn/study/js/chartjs/2.8.0/chart.min.js"></script>
<div style="width:400px;margin:0px auto">
<canvas id="myChart" ></canvas>
</div>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['红', '蓝', '黄', '绿', '紫', '橙'],
datasets: [{
label: '示例',
data: [12, 19, 3, 5, 0, 3],
borderColor:'blue',
backgroundColor:'skyBlue',
borderWidth: 1,
}]
}
});
</script>
水平的
<script src="https://how2j.cn/study/js/chartjs/2.8.0/chart.min.js"></script>
<div style="width:400px;margin:0px auto">
<canvas id="myChart" ></canvas>
</div>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ['红', '蓝', '黄', '绿', '紫', '橙'],
datasets: [{
label: '示例',
data: [12, 19, 3, 5, 0, 3],
borderColor:'blue',
backgroundColor:'skyBlue',
borderWidth: 1,
}]
}
});
</script>
多条数据的，因为红变色的比蓝色的落差大，所以蓝色的就被“压“的很扁了。
<script src="https://how2j.cn/study/js/chartjs/2.8.0/chart.min.js"></script>
<div style="width:400px;margin:0px auto">
<canvas id="myChart" ></canvas>
</div>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['红', '蓝', '黄', '绿', '紫', '橙'],
datasets: [
{
label: '示例1',
data: [12, 19, 3, 5, 0, 3],
borderColor:'blue',
backgroundColor:'skyBlue',
borderWidth: 1,
},
{
label: '示例2',
data: [182, 51, 133, 54, 105, 96],
borderColor:'red',
backgroundColor:'pink',
borderWidth: 1,
},
]
}
});
</script>
左边y轴显示蓝色的，右边y轴显示红色的。 这样就不会有 蓝色的被压缩的感觉了。
<script src="https://how2j.cn/study/js/chartjs/2.8.0/chart.min.js"></script>
<div style="width:400px;margin:0px auto">
<canvas id="myChart" ></canvas>
</div>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['红', '蓝', '黄', '绿', '紫', '橙'],
datasets: [
{
label: '示例1',
data: [12, 19, 3, 5, 0, 3],
borderColor:'blue',
backgroundColor:'skyBlue',
borderWidth: 1,
yAxisID: 'y-axis-1',
},
{
label: '示例2',
data: [182, 51, 133, 54, 105, 96],
borderColor:'red',
backgroundColor:'pink',
borderWidth: 1,
yAxisID: 'y-axis-2',
},
]
},
options:{
scales:{
yAxes: [{
type: 'linear',
display: true,
position: 'left',
id: 'y-axis-1',
}, {
type: 'linear',
display: true,
position: 'right',
id: 'y-axis-2',
gridLines: {
drawOnChartArea: false
}
}],
}
}
});
</script>
HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。
问答区域
2021-03-22
var myChart = new Chart(ctx, {
回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢
2020-05-01
怎么让数据动态可视化
2020-02-04
gridLines这个是什么属性 什么意思？
提问之前请登陆
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|
