qiun-data-charts 横向柱状图的属性设置
时间: 2023-12-19 09:16:06 浏览: 76
要设置 qiun-data-charts 组件中横向柱状图的属性,需要在组件的配置项中进行设置。以下是一些常用的属性设置:
1. type: 设置图表类型为 horizontalBar。
2. data: 设置图表的数据,需要传入一个数组,每个元素包含柱状图的名称和对应的值。
3. options: 设置图表的选项,包括标题、轴标签、图例等等。可以使用 Chart.js 提供的选项进行自定义设置。
4. responsive: 设置图表是否自适应窗口大小。
5. maintainAspectRatio: 设置是否保持宽高比。
例如,以下是一个简单的横向柱状图的属性设置:
```
{
type: 'horizontalBar',
data: {
labels: ['A', 'B', 'C', 'D', 'E'],
datasets: [{
label: '数据',
data: [12, 19, 3, 5, 2],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
}]
},
options: {
scales: {
xAxes: [{
ticks: {
beginAtZero:true
}
}]
}
},
responsive: true,
maintainAspectRatio: false
}
```
以上设置会生成一个横向柱状图,包含 5 个数据,每个数据对应一个柱状图。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)