js绘制折线图

使用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