HTML绘制饼状图和柱状图

HTML本身并不直接支持绘制图表，但它可以配合JavaScript库如D3.js、Chart.js、Highcharts等来创建可视化内容，包括饼状图和柱状图。

1. **饼状图** (Pie Chart)：饼状图用于显示整体部分的比例，适合展示各部分占总体的比例。在HTML+JS的情况下，比如使用Chart.js，你可以通过HTML元素`<canvas>`来画出饼图，然后利用JavaScript代码设置数据和配置选项，生成动态的饼状图形。

<canvas id="pie-chart"></canvas>
<script src="chart.min.js"></script>
<script>
var ctx = document.getElementById('pie-chart').getContext('2d');
var myPieChart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: ['Label 1', 'Label 2', 'Label 3'],
        datasets: [{
            data: [300, 50, 150],
            backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
        }]
    },
});
</script>

2. **柱状图** (Bar Chart)：柱状图用于比较不同类别之间的数值，横轴通常表示分类，纵轴表示数值大小。同样使用Canvas和JavaScript库，例如：

<canvas id="bar-chart"></canvas>
<script>
var ctx = document.getElementById('bar-chart').getContext('2d');
new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Category A', 'Category B', 'Category C'],
        datasets: [{
            label: 'Data',
            data: [12, 19, 3],
            backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
        }]
    }
});
</script>