Highcharts库-柱状图的简单使用
时间: 2023-10-27 22:08:25 浏览: 109
简单的柱状图
Highcharts 是一个非常流行的 JavaScript 数据可视化库,它提供了多种图表类型,其中柱状图是最常用的之一。下面是 Highcharts 库-柱状图的简单使用步骤:
1. 引入 Highcharts 库的 JavaScript 文件和样式文件。
```html
<head>
<script src="https://code.highcharts.com/highcharts.js"></script>
<link rel="stylesheet" href="https://code.highcharts.com/css/highcharts.css">
</head>
```
2. 准备一个容器用于显示柱状图。
```html
<div id="container"></div>
```
3. 创建柱状图并配置数据和选项。
```javascript
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Monthly Sales'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Sales (USD)'
}
},
series: [{
name: 'Sales',
data: [10000, 20000, 15000, 30000, 25000, 18000, 22000, 28000, 20000, 25000, 30000, 35000]
}]
});
```
4. 显示柱状图。
```html
<div id="container"></div>
```
这样就可以实现一个简单的 Highcharts 库-柱状图了。需要注意的是,Highcharts 库是商业软件,使用时需要购买许可证或遵守非商业使用协议。
阅读全文