利用flotr2.min.js写一个双柱的柱状图
时间: 2023-03-24 10:00:57 浏览: 45
好的,以下是一个使用 Flotr2 库编写的双柱形图的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>双柱形图</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flotr2/2.0.4/flotr2.min.js"></script>
</head>
<body>
<div id="chart"></div>
<script>
var data = [
[1, 10],
[2, 20],
[3, 15],
[4, 25],
[5, 30]
];
var chart = Flotr.draw(document.getElementById("chart"), [{
data: data,
bars: {
show: true,
barWidth: 0.5,
fillOpacity: 0.8
}
}], {
xaxis: {
min: 0,
max: 6
},
yaxis: {
min: 0
},
grid: {
verticalLines: false
}
});
</script>
</body>
</html>
```
这个示例代码会绘制一个双柱形图,横轴为 1 到 5 的整数,纵轴表示某个指标的值。每个柱形图的宽度为 0.5,填充透明度为 0.8。你可以根据需要修改 `data` 数组中的数据,以及配置项 `bars`、`xaxis`、`yaxis` 和 `grid`,来调整图表的显示效果。