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基础薄弱的开发人员。若有错误，还望各位前辈在评论区指出。