相信做前端的程序员门都使用过各式各样的图表，但博主在找了很多种图表都没有发现具有翻页功能的图表，于是在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种。