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

xiaoxiao2021-02-28  91

首先贴出部分代码:

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中存储的是日期,讲这些数据传进来后会被自动加载到图上。 效果图如下: 这是四条折线,不过两两重合了。

转载请注明原文地址: https://www.6miu.com/read-40613.html

最新回复(0)