chartjs系列教材（二）- 柱状图

chartjs系列教材（一）- 介绍

chartjs系列教材（三）- 曲线图

工具版本兼容问题

步骤 1 : 柱状图
步骤 2 : 垂直
步骤 3 : 水平
步骤 4 : 多数据
步骤 5 : 多轴

步骤 1 :

柱状图

edit 顶折

纠问

接下来演示各种柱状图的常用形态。我就直接给出代码了，在用的时候，直接复制粘贴，然后修改修改就可以了。

步骤 2 :

垂直

edit 顶折

纠问

最简单的。。。

运行效果

代码行数较多，请点击查看

步骤 3 :

水平

edit 顶折

纠问

水平的

运行效果

代码行数较多，请点击查看

步骤 4 :

多数据

edit 顶折

纠问

多条数据的，因为红变色的比蓝色的落差大，所以蓝色的就被“压“的很扁了。

运行效果

代码行数较多，请点击查看

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

xxxxxxxxxx
 
<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>
​

渲染中渲染完成

效果

步骤 5 :

多轴

edit 顶折

纠问

左边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>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

]
    },
    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>

xxxxxxxxxx
 
<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>
​