|
|
|
|
步骤 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公众号，关注后实时获知最新的教程和优惠活动，谢谢。
问答区域
2020-05-01
怎么让数据动态可视化
2020-02-04
gridLines这个是什么属性 什么意思？
1 个答案
第二只大鹅 跳转到问题位置 答案时间：2020-03-31 试验一下就知道了，gridLines的意思是网格线，这个参数控制的是要不要画网格线，可以看到每个图里都是有网格线的，这个网格线的分布是根据数据计算而来的，比如，如果数据是【12, 19, 3, 5, 0, 3】，那么网格线就会是【0,5,10,15,20】
而如果是多数据情况下，默认状态两组数据都会生成各自的网格线，为了美观，我们需要关闭一组网格线，这个参数就是控制这个的
回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢
提问之前请登陆
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|
