iT邦幫忙

0

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

各位大大好,小弟目前使用 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邦高手 3 級 ‧ 2020-05-04 17:11:00 檢舉
是否考慮不在 vue 裡面用 hightcharts?只是顯示 chart 用不到 vue。
直接依據 hightcharts 文件把資料丟進去即可。

另外請把 script 跟 style 標籤放在 body 或是 head 裡面。
感謝 ! 後來解決了

2 個回答

0
清心明月
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) 

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

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

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

congratulation

1
listennn08
iT邦高手 6 級 ‧ 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 完在執行
},

感謝回答,後來我直接把值塞進highchart 就行了

我要發表回答

立即登入回答