Highcharts 實現HTML頁面多個折線圖

前言

最近作項目的時候，產品說要在後臺的首頁放多折線圖（不是多數據折線圖），但我上去網上找，基本是多數據折線圖。例如：

同時換關鍵字也沒什麼可參考的。

多折線圖實現

找不到參考的，只能本身摸索。因而嘗試將呈現折線圖的HTML內容複製一遍。結果是——只顯示一個折線圖，控制檯沒有報錯。 開始有些思路，產生問題的緣由多是：

1、數據沒有傳過來；

2、數據綁定的問題；

3、一二問題同時有。

最後發現一開始的HTML結構出現問題，致使後續的數據綁定出現問題。

highcharts插件是經過綁定id，並將數據渲染到對應id的容器中。highcharts的官方文檔實例不太明顯，走了一小段彎路。

JS代碼

<script type="text/javascript">

    var vm = new Vue({
        el: '#app',
        data: {
            //表格當前頁數據
            list: [],
            status: '3',

        },
        created: function () {
            //this.date=vm.date["new Date"];

            this.loadData(this.status);
        },
        methods: {
            //從服務器讀取數據
            loadData(status) {
                let vm = this;
                vm.listLoading = true;
                $.getJSON('Ajax請求地址', {status: status}, function (res) {
                    vm.time = [];
                    vm.number = [];
                    vm.time = res.time;//X軸時間
                    vm.user=res.user;//Y軸用戶數量
                    vm.downloads=res.downloads;//Y軸下載數量
                    vm.views=res.views;//Y軸瀏覽量
                    vm.date = res.date;//標題上的時間
                    vm.listLoading = false;                   
                    var chart = Highcharts.chart('user', {
                        title: {
                            text: vm.date+' 用戶數量'
                        },
                        subtitle: {
                            text: '數據來源：'
                        },
                        yAxis: {
                            title: {
                                text: '用戶數量'
                            }
                        },
                        legend: {
                            layout: 'vertical',
                            align: 'right',
                            verticalAlign: 'middle'
                        },
                        xAxis: {
                            categories: vm.time
                        },
                        series: [
                            {
                                name: '用戶數量',
                                data: vm.user
                            },
                            
                        ],
                        responsive: {
                            rules: [{
                                condition: {
                                    maxWidth: 500
                                },
                                chartOptions: {
                                    legend: {
                                        layout: 'horizontal',
                                        align: 'center',
                                        verticalAlign: 'bottom'
                                    }
                                }
                            }]
                        }
                    });
					// Highcharts.chart('id',data);
                    var chart = Highcharts.chart('download', {
                        title: {
                            text: vm.date+' 下載次數'
                        },
                        subtitle: {
                            text: '數據來源：'
                        },
                        yAxis: {
                            title: {
                                text: '下載次數'
                            }
                        },
                        legend: {
                            layout: 'vertical',
                            align: 'right',
                            verticalAlign: 'middle'
                        },
                        xAxis: {
                            categories: vm.time
                        },
                        series: [
                            {
                                name: '下載次數',
                                data: vm.downloads
                            },
                            
                        ],
                        responsive: {
                            rules: [{
                                condition: {
                                    maxWidth: 500
                                },
                                chartOptions: {
                                    legend: {
                                        layout: 'horizontal',
                                        align: 'center',
                                        verticalAlign: 'bottom'
                                    }
                                }
                            }]
                        }
                    });
                });
            },
            //篩選時間類型
            sel(){
                this.loadData(this.status);
            },
        },
    })

</script>

HTML

<div class="example-wrap">
                <div class="example">                   
                    <div id="user" style="width: 90%;height:500px;"></div>              
                    <div id="container" style="width: 90%;height:500px;"></div>
                    <div id="download" style="width: 90%;height:500px;"></div>
                </div>
            </div>

效果

若想實現多數據折線圖，則在series中添加數據項便可。

series: [
                            {
                                name: '用戶數量',
                                data: vm.user
                            },
                            {
                                name: '下載數量',
                                data: vm.downloads
                            },
                            {
                                name: '瀏覽量',
                                data: vm.views
                            },
                        ],

相關連接

HighCharts在線演示

http://www.hcharts.cn/demo/index.php

HighCharts半中文API文檔

http://www.hcharts.cn/api/index.php

注：百度搜到的那些相關的帖子沒有比較準確說到關鍵點上（相關文章也很少），以及官方文檔的描述有點亂。我的寫的這篇更傾向於演示，比較適合JS基礎薄弱的開發人員。若有錯誤，還望各位前輩在評論區指出。