前段时间公司让弄图表，给我说有HighCharts这个js插件，于是上网上搜，由于本人是写后端的，对于JavaScript和jQuery不是很熟悉，虽然找到了模板，但是还是不明白，所以一点一点的改，但好的结果是最后还是搞出来，所以写个随笔，记录和总结下
var id =${id};
$.ajax({
url: '${base}/act/manage/ggdr/getChartsData',
type: 'POST',
dataType: 'json',
data:{'id':id},
success:function(data){
console.log(data[1].create_time);
var xData = [];//组装图表行的数据（x轴）
var yData = [];//组装图表每列的数据（y轴）
var addData =[];//因为我的图表是柱状图和折线图组合的图表，所以需要组装折线图的列数据
var sum =0;
for(var i=0;i<data.length;i++){
var temp = new Date(data[i].create_time);
var formateDte = temp.getFullYear()+'-'+(temp.getMonth()+1)+'-'+temp.getDate();
xData.push(formateDte);
yData.push(data[i].num);
sum +=data[i].num;
addData.push(sum);
}
上面这段是我从后台取数据的的代码，大家可以不用在意
var chart;
chart = new Highcharts.Chart({
chart: {
renderTo: 'chart_combo' //关联页面元素div#id //这里是定义图表放在哪，红色的字就是div的id
},
title: { //图表标题
text: '果果达人参与用户趋势图'
},
xAxis: { //x轴
categories: xData, //X轴类别
labels:{y:18} //x轴标签位置：距X轴下方18像素
},
yAxis: { //y轴
title: {text: '参与人数（人）'}, //y轴标题
lineWidth: 1 //基线宽度
},
tooltip: {
formatter: function() { //格式化鼠标滑向图表数据点时显示的提示框
var s;
if (this.point.name) { // 饼状图
s = '<b>' + this.point.name + '</b>: <br>' + this.y+ '人(' +
twoDecimal(this.percentage) + '%)';
} else {
s = '' + this.x + ': ' + this.y + '人';
}
return s;
}
}, exporting: {
enabled: false //设置导出按钮不可用
},
plotOptions:{
series:{
pointWidth:30
}
},
series: [{ //数据列
type: 'column',
name: '每日参加人数',
data: yData //这里需要一个数组，我们在上面已经组装好的列数据可以直接赋值在这
},
{
type: 'spline',
name: '目前总参加人数',
data: addData //这里也一样，这是折线图的数据
}]
});
}
})
