用 Vue實作 Hgihchart WindRose 圖表空白問題

vue.js highcharts

silence 2020-05-04 16:03:49 ‧ 1267 瀏覽

分享至

各位大大好，小弟目前使用 vue+axios去串接API，並把API回傳資料顯示在圖表裡，但是目前遇到的狀況是裡面是有資料的，但是圖表都顯示空白，也沒報任何錯，想請教各位大大這是什麼問題? 謝謝

API 回傳資料格式

{"Success":true,
 "Message":"Success",
 "Payload":{
   "Frequencies":["<0.3m/s",">0.5m/s",">1m/s",">1.5m/s",">2m/s",">3m/s",">5m/s",">7m/s",">9m/s","9-10 m/s"],"Data":[{"Direction":"N","Value":[4.35,4.35,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0]},{"Direction":"NNE","Value":[0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0]},{"Direction":"NE","Value":[0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0]},{"Direction":"ENE","Value":[0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0]},{"Direction":"E","Value":[0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0]},{"Direction":"ESE","Value":[0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0]},{"Direction":"SE","Value":[0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0]},{"Direction":"SSE","Value":[0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0]},{"Direction":"S","Value":[0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0]},{"Direction":"SSW","Value":[4.35,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0]},{"Direction":"SW","Value":[0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0]},{"Direction":"WSW","Value":[0.0,4.35,13.04,4.35,8.7,4.35,0.0,0.0,0.0,0.0]},{"Direction":"W","Value":[4.35,4.35,0.0,0.0,4.35,0.0,0.0,0.0,0.0,0.0]},{"Direction":"WNW","Value":[0.0,4.35,0.0,4.35,4.35,0.0,0.0,0.0,0.0,0.0]},{"Direction":"NW","Value":[0.0,13.04,8.7,4.35,0.0,0.0,0.0,0.0,0.0,0.0]},{"Direction":"NNW","Value":[0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0]}]}}

完整程式碼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WindRose</title>
</head>
<style>
    #container {
        min-height: 100vh;
    }

    body {
        margin: 0;
    }
</style>

<body>
    <div id="app">
        <div id="container">
            <table id="freq" border="0" cellspacing="0" cellpadding="0">
                <tr nowrap bgcolor="#CCCCFF">
                    <th class="freq" v-for="(item, index) in this.frapmanet.Frequencies">{{item}}</th>
                </tr>
                <tr nowrap v-for="(item, index) in this.frepDirection">
                    <td class="dir">{{item.Direction}}</td>
                    <td class="data" v-for="(col, index) in item.Value">{{col}}</td>
                </tr>
            </table>
        </div>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                frapmanet: '',
                startRow: '',
                endRow: '',
                endColumn: '',
                pjid: '',
                stid: '',
                frepDirection: '',
                frepValue: ''
            }
        },
        created() {
            let getUrl = location.href;
            let newUrl = new URL(getUrl);
            this.pjid = newUrl.searchParams.get('Pjid');
            this.stid = newUrl.searchParams.get('Stid');
            axios.get(`公司API`).then(res => {
                this.frapmanet = res.data.Payload;
                this.frepDirection = Object.values(this.frapmanet.Data);

            }).catch(err => {
                console.log(err);
            })
            this.getChart();
        },
        mounted() {

        },
        methods: {
            getChart() {
                Highcharts.chart('container', {
                    data: {
                        table: 'freq',
                        startRow: 1,
                        endRow: 17,
                        endColumn: 10
                    },
                    chart: {
                        polar: true,
                        type: 'column'
                    },
                    title: {
                        text: ''
                    },
                    subtitle: {
                        text: ''
                    },
                    pane: {
                        size: '100%'
                    },
                    legend: {
                        align: 'right',
                        verticalAlign: 'top',
                        y: 100,
                        layout: 'vertical'
                    },
                    xAxis: {
                        tickmarkPlacement: 'on'
                    },
                    yAxis: {
                        min: 0,
                        endOnTick: false,
                        showLastLabel: true,
                        title: {
                            text: '(%)'
                        },
                        labels: {
                            formatter: function () {
                                return this.value + '%';
                            }
                        },
                        reversedStacks: false
                    },
                    tooltip: {
                        valueSuffix: '%'
                    },
                    plotOptions: {
                        series: {
                            stacking: 'normal',
                            shadow: false,
                            groupPadding: 0,
                            pointPlacement: 'on'
                        }
                    }
                });
            }
        },
    })
</script>

</html>

淺水員 iT邦大師 6 級 ‧ 2020-05-04 17:11:00 檢舉

是否考慮不在 vue 裡面用 hightcharts？只是顯示 chart 用不到 vue。
直接依據 hightcharts 文件把資料丟進去即可。

另外請把 script 跟 style 標籤放在 body 或是 head 裡面。

silence iT邦新手 4 級 ‧ 2020-05-06 16:16:08 檢舉

感謝 ! 後來解決了

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

清心明月

iT邦新手 3 級 ‧ 2020-05-05 01:29:50

若不呼叫公司API 獲取json，改為 hard code。能否正常顯示呢？若可以的話, 應該是 async處理問題。

axios.get(`公司API`).then(res...........)

改為

axios.get(`公司API`).then(res...........).bind(this)

你試一下，我在路邊亂寫沒有測試過。

但八成就應該是這個問題了

回應 2
分享
檢舉

silence iT邦新手 4 級 ‧ 2020-05-06 16:16:48 檢舉

感謝回答，但我後來用別的方法去處理了，解決了

清心明月 iT邦新手 3 級 ‧ 2020-05-09 00:42:03 檢舉

congratulation

登入發表回應

listennn08

iT邦高手 5 級 ‧ 2020-05-05 08:29:32

把 getChart 放到 mounted 執行
改這樣

created() {
    let getUrl = location.href;
    let newUrl = new URL(getUrl);
    this.pjid = newUrl.searchParams.get('Pjid');
    this.stid = newUrl.searchParams.get('Stid');
    axios.get(`公司API`).then(res => {
        this.frapmanet = res.data.Payload;
        this.frepDirection = Object.values(this.frapmanet.Data);
    }).catch(err => {
        console.log(err);
    })
           
},
mounted() {
    this.getChart(); // 要等 dom 建起來 table render 完在執行
},