怎么把HTML文档做成折线图,Highcharts 实现HTML页面多个折线图

前言

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

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

多折线图实现

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

一、数据没有传过来；

二、数据绑定的问题；

三、一二问题同时有。

最后发现一开始的HTML结构出现问题，导致后续的数据绑定出现问题。

highcharts插件是通过绑定id，并将数据渲染到对应id的容器中。highcharts的官方文档实例不太明显，走了一小段弯路。

JS代码

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);

},

},

})

HTML

效果

若想实现多数据折线图，则在series中添加数据项即可。

series: [

{

name: '用户数量',

data: vm.user

},

{

name: '下载数量',

data: vm.downloads

},

{

name: '浏览量',

data: vm.views

},

],

相关链接

HighCharts在线演示

HighCharts半中文API文档

注：百度搜到的那些相关的帖子没有比较准确说到关键点上(相关文章也不多)，以及官方文档的描述有点乱。个人写的这篇更倾向于演示，比较适合JS基础薄弱的开发人员。如有错误，还望各位前辈在评论区指出。