Echartsはストライプ図を積み重ねます——各クラスは各月に男子学生、女子学生の遅刻回数の統計
26504 ワード
事前に準備しておけjs公式サイトのダウンロードアドレス:http://echarts.baidu.com/download.html
まず、統計が必要なデータを格納するdataを定義します(戻りを要求するJSONデータとみなすことができます):
そのうちtimeは月、class_Noクラス番号、times_sumは遅刻回数、sex_No=1は冗長なデータで、残りの0、1は1組の男子学生、女子学生を代表して、2、3は2組の男子学生、女子学生を代表して、4、5は3組の男子学生、女子学生を代表して、6、7は4組の男子学生、女子学生を代表します(どうしてですか?後でゆっくり言います)
最終的な効果:
最初にメソッドを定義し、入力開始月と終了月に基づいて月配列を返します(月フォーマットはyyyy-mm):
月範囲配列を取得し、縦軸を定義します.
dataデータの異なる月、異なるクラスを1つの2次元配列に格納する必要があります(現在の例は6ヶ月、4つのクラス(男性、女性、各グループ))構造は、次の図のようになります.
したがって、上記のsex_No:0、1は1組の男子学生、女子学生を代表し、2、3は2組の男子学生、女子学生を代表し、4、5は3組の男子学生、女子学生を代表し、6、7は4組の男子学生、女子学生を代表し、ちょうど2次元配列の各行に対応している.したがって,初期化は8 X 6の2次元配列であり,初期要素はすべて0である.
sex_をNo 2次元配列の行下書きとして、元のdataデータをそれぞれ格納する対応する2次元配列の位置を、最終的な描画データとする.
seriesデータ系列を定義するには、次の手順に従います.
2 D配列データをseriesデータ系列に挿入し、データビューのヘッダー、テーブル本体を定義します.
完全なコード:
コードにはいくつかの問題があり、その後、簡単な機能を追加し、徐々に改善されています.例えば、あるクラスのデータだけを調べることができるように選択できるなどです.
私の分かち合いが関连する知识を学ぶ学友にある収获があることを望んで、みんなが指摘することを批判することを歓迎して、どんな良い方法と提案があってみんなの指导を歓迎して、とても感谢します!
まず、統計が必要なデータを格納するdataを定義します(戻りを要求するJSONデータとみなすことができます):
var data = {
"month_start":"2017-11" ,
"month_end":"2018-04",
"resultlist":[{"time":"2017-11","sex_no":"-1","class_no":"1","times_sum":"3"},
{"time":"2017-11","sex_no":"0","class_no":"1","times_sum":"9"},
{"time":"2017-11","sex_no":"1","class_no":"1","times_sum":"7"},
{"time":"2017-11","sex_no":"-1","class_no":"2","times_sum":"5"},
{"time":"2017-11","sex_no":"2","class_no":"2","times_sum":"5"},
{"time":"2017-11","sex_no":"3","class_no":"2","times_sum":"2"},
{"time":"2017-11","sex_no":"4","class_no":"3","times_sum":"4"},
{"time":"2017-11","sex_no":"-1","class_no":"4","times_sum":"4"},
{"time":"2017-11","sex_no":"6","class_no":"4","times_sum":"4"},
{"time":"2017-11","sex_no":"7","class_no":"4","times_sum":"7"},
{"time":"2017-12","sex_no":"-1","class_no":"1","times_sum":"2"},
{"time":"2017-12","sex_no":"0","class_no":"1","times_sum":"24"},
{"time":"2017-12","sex_no":"1","class_no":"1","times_sum":"24"},
{"time":"2017-12","sex_no":"-1","class_no":"2","times_sum":"6"},
{"time":"2017-12","sex_no":"2","class_no":"2","times_sum":"5"},
{"time":"2017-12","sex_no":"3","class_no":"2","times_sum":"8"},
{"time":"2017-12","sex_no":"-1","class_no":"3","times_sum":"6"},
{"time":"2017-12","sex_no":"4","class_no":"3","times_sum":"5"},
{"time":"2017-12","sex_no":"5","class_no":"3","times_sum":"10"},
{"time":"2017-12","sex_no":"-1","class_no":"4","times_sum":"1"},
{"time":"2017-12","sex_no":"6","class_no":"4","times_sum":"7"},
{"time":"2017-12","sex_no":"7","class_no":"4","times_sum":"10"},
{"time":"2018-01","sex_no":"0","class_no":"1","times_sum":"25"},
{"time":"2018-01","sex_no":"1","class_no":"1","times_sum":"34"},
{"time":"2018-01","sex_no":"-1","class_no":"2","times_sum":"4"},
{"time":"2018-01","sex_no":"2","class_no":"2","times_sum":"12"},
{"time":"2018-01","sex_no":"3","class_no":"2","times_sum":"15"},
{"time":"2018-01","sex_no":"-1","class_no":"3","times_sum":"3"},
{"time":"2018-01","sex_no":"4","class_no":"3","times_sum":"4"},
{"time":"2018-01","sex_no":"5","class_no":"3","times_sum":"15"},
{"time":"2018-01","sex_no":"-1","class_no":"4","times_sum":"3"},
{"time":"2018-01","sex_no":"6","class_no":"4","times_sum":"20"},
{"time":"2018-01","sex_no":"7","class_no":"4","times_sum":"14"},
{"time":"2018-02","sex_no":"0","class_no":"1","times_sum":"8"},
{"time":"2018-02","sex_no":"1","class_no":"1","times_sum":"12"},
{"time":"2018-02","sex_no":"-1","class_no":"2","times_sum":"1"},
{"time":"2018-02","sex_no":"2","class_no":"2","times_sum":"2"},
{"time":"2018-02","sex_no":"3","class_no":"2","times_sum":"9"},
{"time":"2018-02","sex_no":"-1","class_no":"4","times_sum":"2"},
{"time":"2018-02","sex_no":"6","class_no":"4","times_sum":"12"},
{"time":"2018-02","sex_no":"7","class_no":"4","times_sum":"10"},
{"time":"2018-03","sex_no":"-1","class_no":"1","times_sum":"1"},
{"time":"2018-03","sex_no":"0","class_no":"1","times_sum":"2"},
{"time":"2018-03","sex_no":"1","class_no":"1","times_sum":"2"},
{"time":"2018-03","sex_no":"-1","class_no":"2","times_sum":"1"},
{"time":"2018-04","sex_no":"-1","class_no":"2","times_sum":"1"},
{"time":"2018-04","sex_no":"2","class_no":"3","times_sum":"20"},
{"time":"2018-04","sex_no":"1","class_no":"4","times_sum":"5"},
{"time":"2018-04","sex_no":"5","class_no":"1","times_sum":"7"}]
};そのうちtimeは月、class_Noクラス番号、times_sumは遅刻回数、sex_No=1は冗長なデータで、残りの0、1は1組の男子学生、女子学生を代表して、2、3は2組の男子学生、女子学生を代表して、4、5は3組の男子学生、女子学生を代表して、6、7は4組の男子学生、女子学生を代表します(どうしてですか?後でゆっくり言います)
最終的な効果:
最初にメソッドを定義し、入力開始月と終了月に基づいて月配列を返します(月フォーマットはyyyy-mm):
/* */
function getAllMonth(time_s,time_e) {
var startTime = new Date(time_s).getTime();//
var endTime = new Date(time_e).getTime();//
var arr = [];//
var format = function(time) {//
var date = new Date(time);
return (date.getMonth() < 9)?(date.getFullYear() + '-0' + (date.getMonth() + 1)):(date.getFullYear() + '-' + (date.getMonth() + 1));//1-9?￡??? 0
};
var isLeapYear = function(year) {
return (year % 4 == 0) && (year % 100 != 0 || year % 400 == 0);//
};
//
var MONTH = {
'1': 31,
'2': 28,
'3': 31,
'4': 30,
'5': 31,
'6': 30,
'7': 31,
'8': 31,
'9': 30,
'10': 31,
'11': 30,
'12': 31
};
arr.push(time_s);
if(time_s!=time_e){
while (startTime < endTime) {
var start = new Date(startTime);//
if (isLeapYear(start.getFullYear()) && (start.getMonth() + 1 === 2)) {// 2
startTime = startTime + 29 * 24 * 60 * 60 * 1000;
} else {
startTime = startTime + MONTH[start.getMonth() + 1] * 24 * 60 * 60 * 1000;
}
arr.push(format(startTime));
}
}
return arr;
}月範囲配列を取得し、縦軸を定義します.
var timeArr = getAllMonth(month_s,month_e);//
var classNOArr = [' ',' ',' ',' ',
' ',' ',' ',' '];// dataデータの異なる月、異なるクラスを1つの2次元配列に格納する必要があります(現在の例は6ヶ月、4つのクラス(男性、女性、各グループ))構造は、次の図のようになります.
したがって、上記のsex_No:0、1は1組の男子学生、女子学生を代表し、2、3は2組の男子学生、女子学生を代表し、4、5は3組の男子学生、女子学生を代表し、6、7は4組の男子学生、女子学生を代表し、ちょうど2次元配列の各行に対応している.したがって,初期化は8 X 6の2次元配列であり,初期要素はすべて0である.
//
var dataArr = new Array();
for(var i = 0; i < classNOArr.length; i++){
dataArr[i] = new Array();
for(var j = 0; j < timeArr.length; j++){
dataArr[i][j] = 0;
}
}sex_をNo 2次元配列の行下書きとして、元のdataデータをそれぞれ格納する対応する2次元配列の位置を、最終的な描画データとする.
var list = (data.resultlist || []).sort(function(v1,v2){
return v1["time"] < v2["time"]?-1:1;// ,
});
//
for (var i = 0; i < list.length; i++) {
if(list[i]["sex_no"] != -1){
dataArr[list[i]["sex_no"]][timeArr.indexOf(list[i]["time"])] = list[i]["times_sum"];
}
}seriesデータ系列を定義するには、次の手順に従います.
var seriesData = new Array();//series
for(var i = 0; i < timeArr.length;i++){
seriesData[i] = new Array();
}2 D配列データをseriesデータ系列に挿入し、データビューのヘッダー、テーブル本体を定義します.
typeArr = classNOArr;
var length1 = 0;//
var length2 = dataArr.length;//
initData(length1,length2);
function initData(length1,length2){
for(var i = length1; i < length2;i++){
for(var j = 0; j < seriesData.length;j++){
seriesData[j].push(dataArr[i][j]);
}
}
table_header = ' ';
for(var i = length1; i < length2; i++){
table_header += ''+classNOArr[i]+'';
}
for(var i = 0; i < timeArr.length; i++){
table_body += ''
+ ''
+ '开始画图：
//series
function seriesArr(){
var serie = [];
for(var i = 0; i < timeArr.length; i++){
var item = {
name:timeArr[i],
type:'bar',
barMaxWidth : 50,
stack: ' ',
data : seriesData[i],
itemStyle: {
normal:{
color:colorArr[i]
}
}
};
serie.push(item);
}
return serie;
}
var myChart = echarts.init(DOM.get('#main'));
option = {
tooltip : { //tooltip: ，
trigger: 'item', // 'axis'
axisPointer : { // ，
type : 'shadow' // ， ：'line' | 'shadow'
}
},
legend : {//legend: ，
data:timeArr
},
toolbox : {
right : "10%",
show : true,
feature : {
mark : {
show : true
},
dataView : {
show : true,
readOnly : true,
optionToContent: function(opt) {
var series = opt.series;
var table = ''
+''
+ table_header
+ ''
+ table_body
+ '
';
return table;
}
},
restore : {
show : false
},
saveAsImage : {
show : true
},
}
},
grid : { //grid: ，
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [//xAxis: ，
{
type : 'value', //// ， 'category'， 'value'
}
],
yAxis : [ //yAxis ，
{
type : 'category', // ， 'category'， 'value'
data : typeArr,
name : ' '
}
],
series : seriesArr() //
};
myChart.setOption(option);
// ， 。
myChart.on('legendselectchanged', function(obj) {
// console.log(option.yAxis[0].data);
var selected = obj.selected;
var option = myChart.getOption();
// myChart.clear();
for(var i = 0,j = 0;i < timeArr.length;i++){
if(selected[timeArr[i]] == false)
j += 1;
}
if(j == timeArr.length){
for(var i = 0;i < timeArr.length;i++){
selected[timeArr[i]] = true;
}
}
myChart.setOption(option,true);
});
}完全なコード:
echarts
KISSY.use("dom,io,event",function(S,DOM,IO,Event){
var data ={"month_start":"2017-11" ,"month_end":"2018-04",
"resultlist":[
{"time":"2017-11","sex_no":"-1","class_no":"1","times_sum":"3"},
{"time":"2017-11","sex_no":"0","class_no":"1","times_sum":"9"},
{"time":"2017-11","sex_no":"1","class_no":"1","times_sum":"7"},
{"time":"2017-11","sex_no":"-1","class_no":"2","times_sum":"5"},
{"time":"2017-11","sex_no":"2","class_no":"2","times_sum":"5"},
{"time":"2017-11","sex_no":"3","class_no":"2","times_sum":"2"},
{"time":"2017-11","sex_no":"4","class_no":"3","times_sum":"4"},
{"time":"2017-11","sex_no":"-1","class_no":"4","times_sum":"4"},
{"time":"2017-11","sex_no":"6","class_no":"4","times_sum":"4"},
{"time":"2017-11","sex_no":"7","class_no":"4","times_sum":"7"},
{"time":"2017-12","sex_no":"-1","class_no":"1","times_sum":"2"},
{"time":"2017-12","sex_no":"0","class_no":"1","times_sum":"24"},
{"time":"2017-12","sex_no":"1","class_no":"1","times_sum":"24"},
{"time":"2017-12","sex_no":"-1","class_no":"2","times_sum":"6"},
{"time":"2017-12","sex_no":"2","class_no":"2","times_sum":"5"},
{"time":"2017-12","sex_no":"3","class_no":"2","times_sum":"8"},
{"time":"2017-12","sex_no":"-1","class_no":"3","times_sum":"6"},
{"time":"2017-12","sex_no":"4","class_no":"3","times_sum":"5"},
{"time":"2017-12","sex_no":"5","class_no":"3","times_sum":"10"},
{"time":"2017-12","sex_no":"-1","class_no":"4","times_sum":"1"},
{"time":"2017-12","sex_no":"6","class_no":"4","times_sum":"7"},
{"time":"2017-12","sex_no":"7","class_no":"4","times_sum":"10"},
{"time":"2018-01","sex_no":"0","class_no":"1","times_sum":"25"},
{"time":"2018-01","sex_no":"1","class_no":"1","times_sum":"34"},
{"time":"2018-01","sex_no":"-1","class_no":"2","times_sum":"4"},
{"time":"2018-01","sex_no":"2","class_no":"2","times_sum":"12"},
{"time":"2018-01","sex_no":"3","class_no":"2","times_sum":"15"},
{"time":"2018-01","sex_no":"-1","class_no":"3","times_sum":"3"},
{"time":"2018-01","sex_no":"4","class_no":"3","times_sum":"4"},
{"time":"2018-01","sex_no":"5","class_no":"3","times_sum":"15"},
{"time":"2018-01","sex_no":"-1","class_no":"4","times_sum":"3"},
{"time":"2018-01","sex_no":"6","class_no":"4","times_sum":"20"},
{"time":"2018-01","sex_no":"7","class_no":"4","times_sum":"14"},
{"time":"2018-02","sex_no":"0","class_no":"1","times_sum":"8"},
{"time":"2018-02","sex_no":"1","class_no":"1","times_sum":"12"},
{"time":"2018-02","sex_no":"-1","class_no":"2","times_sum":"1"},
{"time":"2018-02","sex_no":"2","class_no":"2","times_sum":"2"},
{"time":"2018-02","sex_no":"3","class_no":"2","times_sum":"9"},
{"time":"2018-02","sex_no":"-1","class_no":"4","times_sum":"2"},
{"time":"2018-02","sex_no":"6","class_no":"4","times_sum":"12"},
{"time":"2018-02","sex_no":"7","class_no":"4","times_sum":"10"},
{"time":"2018-03","sex_no":"-1","class_no":"1","times_sum":"1"},
{"time":"2018-03","sex_no":"0","class_no":"1","times_sum":"2"},
{"time":"2018-03","sex_no":"1","class_no":"1","times_sum":"2"},
{"time":"2018-03","sex_no":"-1","class_no":"2","times_sum":"1"},
{"time":"2018-04","sex_no":"-1","class_no":"2","times_sum":"1"},
{"time":"2018-04","sex_no":"2","class_no":"3","times_sum":"20"},
{"time":"2018-04","sex_no":"1","class_no":"4","times_sum":"5"},
{"time":"2018-04","sex_no":"5","class_no":"1","times_sum":"7"}
]};
initList(data);
function initList(data) {
var list = (data.resultlist || []).sort(function(v1,v2){
return v1["time"] < v2["time"]?-1:1;// ,
});
var month_s = data.month_start;//
var month_e = data.month_end;//
var timeArr = getAllMonth(month_s,month_e);//
var typeArr = [];//
var classNOArr = [' ',' ',' ',' ',
' ',' ',' ',' '];//
var table_header;// html
var table_body = '';// html
var colorArr = ['#4e81bd','#c1504c','#9bbb58','#8164a3','#4aadc7','#f79746'];//
//
var dataArr = new Array();
for(var i = 0; i < classNOArr.length; i++){
dataArr[i] = new Array();
for(var j = 0; j < timeArr.length; j++){
dataArr[i][j] = 0;
}
}
var seriesData = new Array();//series
for(var i = 0; i < timeArr.length;i++){
seriesData[i] = new Array();
}
//
for (var i = 0; i < list.length; i++) {
if(list[i]["sex_no"] != -1){
dataArr[list[i]["sex_no"]][timeArr.indexOf(list[i]["time"])] = list[i]["times_sum"];
}
}
typeArr = classNOArr;
var length1 = 0;//
var length2 = dataArr.length;//
initData(length1,length2);
function initData(length1,length2){
for(var i = length1; i < length2;i++){
for(var j = 0; j < seriesData.length;j++){
seriesData[j].push(dataArr[i][j]);
}
}
table_header = '<td width="10%"> </td>';
for(var i = length1; i < length2; i++){
table_header += '<td>'+classNOArr[i]+'</td>';
}
for(var i = 0; i < timeArr.length; i++){
table_body += '<tr>'
+ '<td width="10%">'
+ '<button style="width:15px;height:10px;background:'+colorArr[i]+';" disabled></button>' //
+ timeArr[i]+'</td>';
for(var j = length1; j < length2; j++){
table_body +='<td style="border:1px #ff000 solid">'+dataArr[j][i]+'</td>';
}
table_body += '</tr>';
}
}
function seriesArr(){
var serie = [];
for(var i = 0; i < timeArr.length; i++){
var item = {
name:timeArr[i],
type:'bar',
barMaxWidth : 50,
stack: ' ',
data : seriesData[i],
itemStyle: {
normal:{
color:colorArr[i]
}
}
};
serie.push(item);
}
return serie;
}
var myChart = echarts.init(DOM.get('#main'));
option = {
tooltip : { //tooltip: ，
trigger: 'item', // 'axis'
axisPointer : { // ，
type : 'shadow' // ， ：'line' | 'shadow'
}
},
legend : {//legend: ，
data:timeArr
},
toolbox : {
right : "10%",
show : true,
feature : {
mark : {
show : true
},
dataView : {
show : true,
readOnly : true,
optionToContent: function(opt) {
var series = opt.series;
var table = '<div style="width:100%;height:100%;text-align:center;border:2px solid #333">'
+'<table class="table table-bordered" style="width:100%;text-align:center;border:1px solid #333"><tbody><tr>'
+ table_header
+ '</tr>'
+ table_body
+ '</tbody></table></div>';
return table;
}
},
restore : {
show : false
},
saveAsImage : {
show : true
},
}
},
grid : { //grid: ，
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [//xAxis: ，
{
type : 'value', //// ， 'category'， 'value'
}
],
yAxis : [ //yAxis ，
{
type : 'category', // ， 'category'， 'value'
data : typeArr,
name : ' '
}
],
series : seriesArr() //
};
myChart.setOption(option);
// ， 。
myChart.on('legendselectchanged', function(obj) {
// console.log(option.yAxis[0].data);
var selected = obj.selected;
var option = myChart.getOption();
// myChart.clear();
for(var i = 0,j = 0;i < timeArr.length;i++){
if(selected[timeArr[i]] == false)
j += 1;
}
if(j == timeArr.length){
for(var i = 0;i < timeArr.length;i++){
selected[timeArr[i]] = true;
}
}
myChart.setOption(option,true);
});
}
/* */
function getAllMonth(time_s,time_e) {
var startTime = new Date(time_s).getTime();//
var endTime = new Date(time_e).getTime();//
var arr = [];//
var format = function(time) {//
var date = new Date(time);
return (date.getMonth() < 9)?(date.getFullYear() + '-0' + (date.getMonth() + 1)):(date.getFullYear() + '-' + (date.getMonth() + 1));//1-9?￡??? 0
};
var isLeapYear = function(year) {
return (year % 4 == 0) && (year % 100 != 0 || year % 400 == 0);//
};
//
var MONTH = {
'1': 31,
'2': 28,
'3': 31,
'4': 30,
'5': 31,
'6': 30,
'7': 31,
'8': 31,
'9': 30,
'10': 31,
'11': 30,
'12': 31
};
arr.push(time_s);
if(time_s!=time_e){
while (startTime < endTime) {
var start = new Date(startTime);//
if (isLeapYear(start.getFullYear()) && (start.getMonth() + 1 === 2)) {// 2
startTime = startTime + 29 * 24 * 60 * 60 * 1000;
} else {
startTime = startTime + MONTH[start.getMonth() + 1] * 24 * 60 * 60 * 1000;
}
arr.push(format(startTime));
}
}
return arr;
}
});
コードにはいくつかの問題があり、その後、簡単な機能を追加し、徐々に改善されています.例えば、あるクラスのデータだけを調べることができるように選択できるなどです.
私の分かち合いが関连する知识を学ぶ学友にある収获があることを望んで、みんなが指摘することを批判することを歓迎して、どんな良い方法と提案があってみんなの指导を歓迎して、とても感谢します!