相信做前端的程序员门都使用过各式各样的图表,但博主在找了很多种图表都没有发现具有翻页功能的图表,于是在Chart.js的基础上写了一些算法实现了可翻页式的折线图,用于显示在数据量过大的情况下的数据(120个数据),由于是刚完成,所以还没有进行优化和封装,只供大家借鉴——
展开:
第二页(由于没有后面的数据,所以默认显示成这样):
下面给出具体思路和代码——
思路:根据大概数据量先指定页数和坐标数值,以二维数组形式存储并赋值给Chart.js,然后通过ajax获取通过php传递过来的数据,并根据指定的页数和坐标值用for循环分成三个数组,分别表示三页的内容,然后当按下上下页后判断当前应该显示那一页,然后赋值相应的Chart.js.
代码:
这是Chart.js声明Chart的格式(有7条线):
var ctx2 = document.getElementById("myChart2"); var myChart2 = new Chart(ctx2, { type: 'line', data: { labels: R, datasets: [{ label: 'happiness', data: hppiness[i], borderWidth: 3, fill:false , lineTension:0.1, borderColor: ['rgba(255, 206, 86, 1)',], backgroundColor: ['rgba(255, 206, 86, 0.2)',], }, { label: 'fear', data: fear[i], borderWidth: 3, fill:false , lineTension:0.1, }, { label: 'surprise', data: surprise[i], borderWidth: 3, fill:false , lineTension:0.1, borderColor: ['rgba(255, 159, 64, 1)'], backgroundColor: ['rgba(255, 159, 64, 0.2)'], }, { label: 'anger', data: anger[i], borderWidth: 3, fill:false , lineTension:0.1, borderColor: ['rgba(255, 99, 132, 1)',], backgroundColor: ['rgba(255, 99, 132,0.2)',], }, { label: 'disgust', data: disgust[i], borderWidth: 3, fill:false , lineTension:0.1, borderColor: ['rgba(153, 102, 255, 1)',], backgroundColor: ['rgba(153, 102, 255, 0.2)',], }, { label: 'sadness', data: sadness[i], borderWidth: 3, fill:false , lineTension:0.1, borderColor: ['rgba(54, 162, 235, 1)',], backgroundColor: ['rgba(54, 162, 235, 0.2)',], }, { label: 'neutral', data: neutral[i], borderWidth: 3, fill:false , lineTension:0.1, borderColor: ['rgba(75, 192, 192, 1)',], backgroundColor: ['rgba(75, 192, 192, 0.2)',], },] }, options: { }
js:
<sccript> var hppiness = new Array(); var h1 = new Array(); var h2 = new Array(); var h3 = new Array(); var fear = new Array(); var f1 = new Array(); var f2 = new Array(); var f3 = new Array(); var surprise = new Array(); var su1 = new Array(); var su2 = new Array(); var su3 = new Array(); var anger = new Array(); var a1 = new Array(); var a2 = new Array(); var a3 = new Array(); var disgust = new Array(); var d1 = new Array(); var d2 = new Array(); var d3 = new Array(); var neutral = new Array(); var n1 = new Array(); var n2 = new Array(); var n3 = new Array(); var sadness = new Array(); var sa1 = new Array(); var sa2 = new Array(); var sa3 = new Array(); var R = new Array(); var RadarArray = new Array(); var RadarArray1 = new Array(); var RadarArray2 = new Array(); var RadarArray3 = new Array(); for (var i=0;i<40;i++) { RadarArray1.push(i); } for (var i=40;i<80;i++) { RadarArray2.push(i); } for (var i=80;i<120;i++) { RadarArray3.push(i); } RadarArray.push(RadarArray1); RadarArray.push(RadarArray2); RadarArray.push(RadarArray3); var i = 0; R=RadarArray[i]; $(document).ready(function(){ var id1 = "{$id}"; $.post('{:url("courseqq")}',{id:id1},function(data){ for (var i = 0; i < data.length; i++) { if(i<=40){ h1.push(data[i].hppiness_avg); f1.push(data[i].fear_avg); su1.push(data[i].surprise_avg); a1.push(data[i].anger_avg); d1.push(data[i].disgust_avg); n1.push(data[i].neutral_avg); sa1.push(data[i].sadness_avg); } else if(40<i<=80){ h2.push(data[i].hppiness_avg); f2.push(data[i].fear_avg); su2.push(data[i].surprise_avg); a2.push(data[i].anger_avg); d2.push(data[i].disgust_avg); n2.push(data[i].neutral_avg); sa2.push(data[i].sadness_avg); } else if(80<i<=120){ h3.push(data[i].hppiness_avg); f3.push(data[i].fear_avg); su3.push(data[i].surprise_avg); a3.push(data[i].anger_avg); d3.push(data[i].disgust_avg); n3.push(data[i].neutral_avg); sa3.push(data[i].sadness_avg); } } hppiness.push(h1); hppiness.push(h2); hppiness.push(h3); fear.push(f1); fear.push(f2); fear.push(f3); surprise.push(su1); surprise.push(su2); surprise.push(su3); anger.push(a1); anger.push(a2); anger.push(a3); disgust.push(d1); disgust.push(d2); disgust.push(d3); neutral.push(n1); neutral.push(n2); neutral.push(n3); sadness.push(sa1); sadness.push(sa2); sadness.push(sa3); }); $("#btn1").click(function(){ if(i<2){ i++; R=RadarArray[i]; var ctx2 = document.getElementById("myChart2"); var myChart2 = new Chart(ctx2, { type: 'line', data: { labels: R, datasets: [{ label: 'happiness', data: hppiness[i], borderWidth: 3, fill:false , lineTension:0.1, borderColor: ['rgba(255, 206, 86, 1)',], backgroundColor: ['rgba(255, 206, 86, 0.2)',], }, { label: 'fear', data: fear[i], borderWidth: 3, fill:false , lineTension:0.1, }, { label: 'surprise', data: surprise[i], borderWidth: 3, fill:false , lineTension:0.1, borderColor: ['rgba(255, 159, 64, 1)'], backgroundColor: ['rgba(255, 159, 64, 0.2)'], }, { label: 'anger', data: anger[i], borderWidth: 3, fill:false , lineTension:0.1, borderColor: ['rgba(255, 99, 132, 1)',], backgroundColor: ['rgba(255, 99, 132,0.2)',], }, { label: 'disgust', data: disgust[i], borderWidth: 3, fill:false , lineTension:0.1, borderColor: ['rgba(153, 102, 255, 1)',], backgroundColor: ['rgba(153, 102, 255, 0.2)',], }, { label: 'sadness', data: sadness[i], borderWidth: 3, fill:false , lineTension:0.1, borderColor: ['rgba(54, 162, 235, 1)',], backgroundColor: ['rgba(54, 162, 235, 0.2)',], }, { label: 'neutral', data: neutral[i], borderWidth: 3, fill:false , lineTension:0.1, borderColor: ['rgba(75, 192, 192, 1)',], backgroundColor: ['rgba(75, 192, 192, 0.2)',], },] }, options: { } }); } else{ } $('#slpk1').selectpicker('refresh'); }); $("#btn2").click(function(){ if(i>0){ i--; R=RadarArray[i]; var ctx2 = document.getElementById("myChart2"); var myChart2 = new Chart(ctx2, { type: 'line', data: { labels: R, datasets: [{ label: 'happiness', data: hppiness[i], borderWidth: 3, fill:false , lineTension:0.1, borderColor: ['rgba(255, 206, 86, 1)',], backgroundColor: ['rgba(255, 206, 86, 0.2)',], }, { label: 'fear', data: fear[i], borderWidth: 3, fill:false , lineTension:0.1, }, { label: 'surprise', data: surprise[i], borderWidth: 3, fill:false , lineTension:0.1, borderColor: ['rgba(255, 159, 64, 1)'], backgroundColor: ['rgba(255, 159, 64, 0.2)'], }, { label: 'anger', data: anger[i], borderWidth: 3, fill:false , lineTension:0.1, borderColor: ['rgba(255, 99, 132, 1)',], backgroundColor: ['rgba(255, 99, 132,0.2)',], }, { label: 'disgust', data: disgust[i], borderWidth: 3, fill:false , lineTension:0.1, borderColor: ['rgba(153, 102, 255, 1)',], backgroundColor: ['rgba(153, 102, 255, 0.2)',], }, { label: 'sadness', data: sadness[i], borderWidth: 3, fill:false , lineTension:0.1, borderColor: ['rgba(54, 162, 235, 1)',], backgroundColor: ['rgba(54, 162, 235, 0.2)',], }, { label: 'neutral', data: neutral[i], borderWidth: 3, fill:false , lineTension:0.1, borderColor: ['rgba(75, 192, 192, 1)',], backgroundColor: ['rgba(75, 192, 192, 0.2)',], },] }, options: { } }); } else{ } }); $("#btn3").click(function(){ R=RadarArray[i]; var ctx2 = document.getElementById("myChart2"); var myChart2 = new Chart(ctx2, { type: 'line', data: { labels: R, datasets: [{ label: 'happiness', data: hppiness[i], borderWidth: 3, fill:false , lineTension:0.1, borderColor: ['rgba(255, 206, 86, 1)',], backgroundColor: ['rgba(255, 206, 86, 0.2)',], }, { label: 'fear', data: fear[i], borderWidth: 3, fill:false , lineTension:0.1, }, { label: 'surprise', data: surprise[i], borderWidth: 3, fill:false , lineTension:0.1, borderColor: ['rgba(255, 159, 64, 1)'], backgroundColor: ['rgba(255, 159, 64, 0.2)'], }, { label: 'anger', data: anger[i], borderWidth: 3, fill:false , lineTension:0.1, borderColor: ['rgba(255, 99, 132, 1)',], backgroundColor: ['rgba(255, 99, 132,0.2)',], }, { label: 'disgust', data: disgust[i], borderWidth: 3, fill:false , lineTension:0.1, borderColor: ['rgba(153, 102, 255, 1)',], backgroundColor: ['rgba(153, 102, 255, 0.2)',], }, { label: 'sadness', data: sadness[i], borderWidth: 3, fill:false , lineTension:0.1, borderColor: ['rgba(54, 162, 235, 1)',], backgroundColor: ['rgba(54, 162, 235, 0.2)',], }, { label: 'neutral', data: neutral[i], borderWidth: 3, fill:false , lineTension:0.1, borderColor: ['rgba(75, 192, 192, 1)',], backgroundColor: ['rgba(75, 192, 192, 0.2)',], },] }, options: { } }); }); }); </script>
php:
public function courseq($id){ $data1=Db::table('zanghua')->where('course_id',$id)->paginate(1); $happiness=Db::table('emotion_avg_courseid')->where('course_id',$id)->value('happiness_avg'); $fear=Db::table('emotion_avg_courseid')->where('course_id',$id)->value('fear_avg'); $surprise=Db::table('emotion_avg_courseid')->where('course_id',$id)->value('surprise_avg'); $anger=Db::table('emotion_avg_courseid')->where('course_id',$id)->value('anger_avg'); $disgust=Db::table('emotion_avg_courseid')->where('course_id',$id)->value('disgust_avg'); $neutral=Db::table('emotion_avg_courseid')->where('course_id',$id)->value('neutral_avg'); $sadness=Db::table('emotion_avg_courseid')->where('course_id',$id)->value('sadness_avg'); $this->assign("data1",$data1); $this->assign("happiness",$happiness); $this->assign("fear",$fear); $this->assign("surprise",$surprise); $this->assign("anger",$anger); $this->assign("disgust",$disgust); $this->assign("neutral",$neutral); $this->assign("sadness",$sadness); $this->assign("id",$id); return view(); }
public function courseqq(){//course ajax 调用方法 $h=Db::query("select hppiness_avg from emotion_avg_minute where course_id='".input('post.id')."' order by emotion_time2"); $f=Db::query("select fear_avg from emotion_avg_minute where course_id='".input('post.id')."' order by emotion_time2"); $su=Db::query("select surprise_avg from emotion_avg_minute where course_id='".input('post.id')."' order by emotion_time2"); $a=Db::query("select anger_avg from emotion_avg_minute where course_id='".input('post.id')."' order by emotion_time2"); $d=Db::query("select disgust_avg from emotion_avg_minute where course_id='".input('post.id')."' order by emotion_time2"); $n=Db::query("select neutral_avg from emotion_avg_minute where course_id='".input('post.id')."' order by emotion_time2"); $sa=Db::query("select sadness_avg from emotion_avg_minute where course_id='".input('post.id')."' order by emotion_time2"); $hh=Db::query("select * from emotion_avg_minute where course_id='".input('post.id')."' order by emotion_time2"); return $hh; }实现方法比较本,但也比较有效,如果有时间会进行一定的优化,并且将其融入到Chart.js种。