JavaScript写一个柱状图
时间: 2023-02-07 16:03:06 浏览: 77
下面是一个使用 JavaScript 和 HTML 绘制柱状图的示例代码:
```
<!DOCTYPE html>
<html>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'bar',
// The data for our dataset
data: {
labels: ['一月', '二月', '三月', '四月', '五月', '六月'],
datasets: [{
label: '柱状图数据',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: [10, 20, 30, 40, 50, 60]
}]
},
// Configuration options go here
options: {}
});
</script>
</body>
</html>
```
在这段代码中,我们首先使用 HTML 的 `canvas` 元素创建了一个画布。然后,在 JavaScript 代码中,我们使用 Chart.js 库创建了一个新的 Chart 对象。我们指定了图表类型为 'bar'(柱状图),并为图表提供了数据和选项。
注意,这段代码中使用的 Chart.js 库需要在页面中通过 `script` 标签引入。例如:
```
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
```
有关如何使用 Chart.js 库创建柱状图的更多信息,请参阅 Chart.js 官方文档:https://www.chartjs.org/