Highcharts 实现HTML页面多个折线图

3 月，跳不动了？>>>

前言

最近做项目的时候，产品说要在后台的首页放多折线图（不是多数据折线图），但我上去网上找，基本是多数据折线图。例如：

同时换关键字也没什么可参考的。

多折线图实现

找不到参考的，只能自己摸索。于是尝试将呈现折线图的HTML内容复制一遍。结果是——只显示一个折线图，控制台没有报错。 开始有些思路，产生问题的原因可能是：

一、数据没有传过来；

二、数据绑定的问题；

三、一二问题同时有。

最后发现一开始的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>

效果

若想实现多数据折线图，则在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基础薄弱的开发人员。如有错误，还望各位前辈在评论区指出。

来源：oschina

链接：https://my.oschina.net/u/4428492/blog/3208950