HighChart如何自行设置x轴的名字和加载多条折线

来源:互联网 发布:centos 6关闭防火墙 编辑:程序博客网 时间:2024/06/06 14:26

首先贴出部分代码:

function createChart(List1,List2,List3,List4,dateData){            var chart = new Highcharts.Chart('container', {                  title: {                        text: '多条折线',                        x: -20                    },                    credits: {    //是否显示版权信息                         enabled: false                    },                    subtitle: {                        text: '',                        x: -20                    },                    xAxis: {                        categories:dateData                  },                    yAxis: {                        title: {                            text: ''                        },                        plotLines: [{                            value: 0,                            width: 1,                            color: '#808080'                        }]                    },                    tooltip: {                      shared: true,                      crosshairs: true,                      crosshairs: [{                          width: 1,                          color: "#006cee",                          dashStyle: 'longdashdot',                          zIndex: 100                       }],                      // 时间格式化字符                      // 默认会根据当前的数据点间隔取对应的值                      // 当前图表中数据点间隔为 1天,所以配置 day 值即可                      dateTimeLabelFormats: {                          day: '%Y-%m-%d'                      }                  },                    legend: {                        layout: 'vertical',                        align: 'right',                        verticalAlign: 'middle',                        borderWidth: 0                    },                    series: [{                    name: '折线1',                    data: List1                       },{                    name: '折线2',                    data: List2                       },{                    name: '折线3',                    data: List3                       },{                    name: '折线4',                    data: List4                    }]            });              }

其中List1,List2,List3,List4,dateData全部都是从后台传过来的集合,里面存储着对应的数据。其中dateData中存储的是日期,讲这些数据传进来后会被自动加载到图上。
效果图如下:这里写图片描述
这是四条折线,不过两两重合了。

0 0
原创粉丝点击