HTML5是一種用于Web開發的標準語言。它提供了許多有用的標記和標簽來創建數據統計圖表。其中，柱形、條形和折線圖是最常用的。 以下是一個用HTML5創建的柱形圖的示例代碼：

<!--創建一個HTML5畫布元素-->
<canvas id="myChart" width="400" height="400"></canvas>
<script>
//獲取畫布元素
var canvas = document.getElementById('myChart');
//獲取上下文
var ctx = canvas.getContext('2d');
//繪制坐標軸
ctx.beginPath();
ctx.moveTo(50, 350);
ctx.lineTo(350, 350);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(50, 350);
ctx.lineTo(50, 50);
ctx.stroke();
//繪制柱形圖
ctx.fillStyle = "blue";
ctx.fillRect(70, 300, 50, 50);
ctx.fillStyle = "red";
ctx.fillRect(150, 200, 50, 150);
ctx.fillStyle = "green";
ctx.fillRect(230, 250, 50, 100);
</script>

通過上述代碼，我們可以得到一個簡單的柱形圖，包括坐標軸和三個柱形。其中，fillStyle屬性用于設置填充顏色，fillRect()函數用于繪制矩形。 多數情況下，繪制折線和條形圖也是一樣的原理。我們只需要更改繪圖函數的參數就行了。以下是一個創建條形圖的示例代碼：

<!--創建一個HTML5畫布元素-->
<canvas id="myChart" width="400" height="400"></canvas>
<script>
//獲取畫布元素
var canvas = document.getElementById('myChart');
//獲取上下文
var ctx = canvas.getContext('2d');
//繪制坐標軸
ctx.beginPath();
ctx.moveTo(50, 350);
ctx.lineTo(350, 350);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(50, 350);
ctx.lineTo(50, 50);
ctx.stroke();
//繪制條形圖
ctx.fillStyle = "blue";
ctx.fillRect(50, 300, 100, 50);
ctx.fillStyle = "red";
ctx.fillRect(150, 200, 150, 50);
ctx.fillStyle = "green";
ctx.fillRect(100, 250, 200, 50);
</script>

以上代碼中，我們更改繪制矩形的函數fillRect()的參數，使得它繪制不同大小的矩形，從而得到一個簡單的條形圖。 總之，HTML5提供了許多強大的標記和標簽來創建數據統計圖。我們可以使用canvas元素、上下文對象（context）和繪圖函數，非常容易地創建出令人印象深刻的圖表。