使用highcharts.js实现简单折线图的示范:
1.首先需要导入所需的js:
需要的js为:jquery-1.8.3.min.js及以上版本; highcharts.js;加载的顺序很重要:jquery必须在highcharts之前加载。
2.具体实现折现图的js代码:
function printFigure(data){ var xdata = []; var ydata = []; for(var i=0; i < data.length; i++){ xdata.push(data[i].date); ydata.push(parseFloat(data[i].totalInterest)); } $('#figure').highcharts({ title: { text: '近两周累计收益', x: -20 }, xAxis: { categories: xdata }, yAxis: { title: { text: '累计收益 (元)' }, plotLines: [{ value: 0, width: 0, color: '#808080' }] }, tooltip: { valueSuffix: '元' }, series: [{ name: '收益', data: ydata }] }); }
解释:xdata和ydata分别为折线图的横轴和纵轴的数据
$('#id').highcharts中的id即为我们在页面当中需要显示折线图的div的id