前言
忙活完動態(tài)表單,動態(tài)附件,動態(tài)表格等等事情后,最近公司又在進軍報表可視化問題了,對于我們前端而言如何將一份份數(shù)據(jù)美美的展示在頁面上實為一項艱巨的任務.
對比了現(xiàn)有的幾個比較有名的可視化工具之后,最終還是決定使用G2來進行項目開發(fā).
G2的使用方式及作用我這里就不展開了,想了解的小伙伴可以撮這里: vue中使用G2(一)
該篇文章主要是記錄一下近期在使用G2所遇到的一些比較坑的問題,如果正好你也在使用G2,且不巧的遇到了和我一樣的問題,那么應該能幫助到你一些.
一凛捏、forceFit屬性寬度自適應問題
在創(chuàng)建chart圖表的時候,要是你圖表的寬度設置為自適應模式,切頁面為欄柵布局的時候,如下:
const chart = new G2.Chart({
container: 'g1',
forceFit: true,
height: 270
})
將forceFit屬性設置為true.
此時打開這個有圖表的頁面,會發(fā)現(xiàn)圖表產生樣式錯亂的情況,比如這樣:
canvas超出了父元素的寬度祥款。如果改變?yōu)g覽器的大小，window.resize的時候才會觸發(fā)forceFit: true這個屬性，才會自適應屏幕的寬度轧房，這時圖表的大小是正常的。
解決方式為:在vue生命周期mounted初始化圖表之后,加入以下代碼即可:
const e = document.createEvent('Event')
e.initEvent('resize', true, true)
window.dispatchEvent(e)
比如我的項目中:
mounted () {
this.initComponent()
},
methods: {
initComponent () {
const chart = new G2.Chart({
container: 'g1',
forceFit: true,
height: 270
})
const e = document.createEvent('Event')
e.initEvent('resize', true, true)
window.dispatchEvent(e)
...
}
此時頁面正常了:
二搜骡、自定義圖表的高度問題
如上所述, G2中提供了forceFit 屬性使得圖表寬度能自適應,但是在實際開發(fā)中我們可能希望圖表的高度隨父級容器的高度變化而變化.
文檔中規(guī)定高度height屬性必需傳遞一個數(shù)字.這樣就打破了我想直接設置高度為100%的幻想.
既然高度必需規(guī)定為一個數(shù)字的話,那么我們就可以獲取包裹圖表的父元素的高度,然后再賦值給圖表就可以了.
例如下面這個栗子??:
<template>
<div ref="element" class="element">
<div id="chart"></div>
</div>
</template>
<script>
export default {
mounted () {
const offsetHeight = this.$refs.element.offsetHeight // 獲取父級高度 200
const chart = new G2.Chart({
container: 'chart',
forceFit: true,
height: offsetHeight,
})
....
}
}
</script>
<style scoped>
.element {
width: 300px;
height: 200px;
}
</style>
vue中獲取元素高度的幾種方式:
例如下面的DOM:
<div ref="element" class="element"></div>
<style>
.element {
width: 200px;
height: 200px;
background-color: red;
padding: 10px;
}
</style>
- 獲取高度值 （內容高+padding+邊框）
let height = this.$refs.element.offsetHeight // 220
- 獲取元素樣式值 （存在單位）
let height = window.getComputedStyle(this.$refs.element).height // 200px
- 獲取元素內聯(lián)樣式值（存在單位, 非內聯(lián)樣式無法獲劝雎薄）
<div ref="element" class="element" style="height: 300px;"></div>
<script>
let height = this.$refs.element.style.height // 300px
</script>
不過我在項目中是將圖表封裝到了一個組件中,所以可以使用$el直接獲取這個組件的屬性.
<template>
<div class='width_full height_full'>
<div id="chart"></div>
</div>
<script>
export default {
mounted () {
const offsetHeight = this.$el.offsetHeight // 獲取組件高度
const chart = new G2.Chart({
container: 'chart',
forceFit: true,
height: offsetHeight,
})
....
}
}
</script>
</template>
該組件的高度由調用它的父級組件控制.
三、圖表內容太小變形問題
在使用圖表時,有時候可能需要一些特別小的圖作為儀表盤看板的一部分.比如構建一個寬200px,高150px的圖表,此時圖表會出現(xiàn)擠壓變形的情況.
我在最開始遇到這個問題的時候也是各種找解決方案.最終還是在G2的Issues上找到了解決方案.只需要在創(chuàng)建圖表的時候,將padding設置為auto就可以了,如下:
const chart = new G2.Chart({
container: 'chart',
widht: 200,
height: 150,
padding: 'auto' // 為了防止小圖時圖表變形
})
四幽钢、字段格式為時間戳報錯
若是x軸字段的格式為時間戳:
2019-09-17
2019.09.17
比如后臺給我的數(shù)據(jù)結構為:
[
{
time: '2019-09-17',
amount: 100
},
{
time: '2019-09-18',
amount: 200
}
]
G2中需要生成一張柱狀圖
此時,控制臺會報錯:
解決方案:
x 軸默認為解析為 time linear 類型了鞋仍，這個類型不能堆疊。
將 x 軸scale 配置為 catTime 就可以搅吁。
在創(chuàng)建的圖表的時候,添加上:
chart.scale('time', { // time為你的x軸時間的字段
type:'timeCat'
})
// 若是使用options配置, 則添加:
options: {
scales: {
time: {
type: 'timeCat'
}
}
}
后語
項目還在開發(fā)中,對于我來說G2還有很多需要掌握的,后期使用上要是還遇到比較坑的點還會在此篇文章上進行更新.很多時候解決問題的方案可能是你在深夜中輾轉難眠時的靈光乍現(xiàn),也可能是在地鐵上刷博客時的驚鴻一瞥,希望這篇文章也能成為你的驚鴻一瞥.
