320 lines
11 KiB
JavaScript
320 lines
11 KiB
JavaScript
var YourTeam = YourTeam || {};
|
|
YourTeam.Chartjs = YourTeam.Chartjs || {};
|
|
class Bar {
|
|
constructor() {
|
|
}
|
|
/*
|
|
* @deprecated since version 0.1
|
|
* @description 初始化Bar基本圖表
|
|
* @param {String} cvsId the canvas`s id
|
|
* @param {Array} aryLabelsX X軸標籤值(String Array)
|
|
* @param {Array} aryVluesY Y軸量值(Integer Array)
|
|
* @param {String} strTitle the title of the chart;def value = null
|
|
* @returns {Object} chart element
|
|
*/
|
|
initBasesss(cvsId, aryLabels, aryVlues, strTitle = null) {
|
|
//function newDate(days) {
|
|
// return new YourTeam.Utility.DateHelper().getChangeDateTime(false, '/', 0, 0, days);
|
|
//}
|
|
let myDatasets = [];
|
|
let objJson = {};
|
|
for (let i = 0; i < aryVlues.length; i++) {
|
|
objJson = {};
|
|
objJson.label = aryLabels[i];
|
|
objJson.data = [aryVlues[i]];
|
|
objJson.borderColor = "rgba(220,20,20,1)";
|
|
objJson.backgroundColor = "rgba(220,20,20,0.5)";
|
|
myDatasets.push(objJson);
|
|
}
|
|
|
|
let config = {
|
|
type: "bar",
|
|
data: {
|
|
//labels: [newDate(-5), newDate(-4), newDate(-3), newDate(-2), newDate(-1), newDate(0)],
|
|
labels: aryLabels,
|
|
datasets: myDatasets
|
|
//datasets: [{
|
|
// //data: [2, 5, 3, 4, 7, 3],
|
|
// data: aryVlues,
|
|
// borderColor: "rgba(220,20,20,1)",
|
|
// backgroundColor: "rgba(220,20,20,0.5)"
|
|
//}]
|
|
},
|
|
options: {
|
|
legend: {
|
|
display: true,
|
|
labels: {
|
|
fontColor: 'rgb(255, 99, 132)'
|
|
}
|
|
},
|
|
scales: {
|
|
xAxes: [{
|
|
type: "category",
|
|
labels: aryLabels
|
|
}],
|
|
yAxes: [{
|
|
ticks: {
|
|
beginAtZero: true
|
|
}
|
|
}]
|
|
},
|
|
title: {
|
|
display: (strTitle) ? true : false,
|
|
text: (strTitle) ? strTitle : ""
|
|
}
|
|
}
|
|
}
|
|
let ctx = document.getElementById(cvsId).getContext("2d");
|
|
//window.myLine = new Chart(ctx, config);
|
|
return new Chart(ctx, config);
|
|
}
|
|
/*
|
|
* @deprecated since version 0.1
|
|
* @description 初始化Bar基本圖表
|
|
* @param {String} cvsId the canvas`s id
|
|
* @param {Array} aryLabelsX X軸標籤值(String Array)
|
|
* @param {Array} aryVluesY Y軸量值(Integer Array)
|
|
* @param {String} strTitle the title of the chart;def value = null
|
|
* @param {String} type the chart is vertical or horizontal ;def value = "bar" (vertical), "horizontalBar" (horizontal)
|
|
* @returns {Object} chart element
|
|
*/
|
|
initBase(cvsId, aryLabels, aryVlues, strLabel = null, strTitle = null, chart = null,type="bar",animation = null) {
|
|
//function newDate(days) {
|
|
// return new YourTeam.Utility.DateHelper().getChangeDateTime(false, '/', 0, 0, days);
|
|
//}
|
|
if (chart !== null) {
|
|
chart.destroy();
|
|
}
|
|
let myDatasets = [];
|
|
let objJson = {};
|
|
let valLabelObj = {};
|
|
|
|
objJson.backgroundColor = [];
|
|
|
|
objJson.label = strLabel ?? "";
|
|
for (let i = 0; i < aryVlues.length; i++) {
|
|
objJson.borderColor = "rgba(220,20,20,1)";
|
|
objJson.backgroundColor.push("rgba(" + random(0, 255) + "," + random(0, 255) + "," + random(0, 255) + ",0.5)");
|
|
}
|
|
objJson.data = aryVlues;
|
|
myDatasets.push(objJson);
|
|
|
|
|
|
let config = {
|
|
type: type,
|
|
data: {
|
|
//labels: [newDate(-5), newDate(-4), newDate(-3), newDate(-2), newDate(-1), newDate(0)],
|
|
labels: aryLabels,
|
|
datasets: myDatasets
|
|
//datasets: [{
|
|
// //data: [2, 5, 3, 4, 7, 3],
|
|
// data: aryVlues,
|
|
// borderColor: "rgba(220,20,20,1)",
|
|
// backgroundColor: "rgba(220,20,20,0.5)"
|
|
//}]
|
|
},
|
|
options: {
|
|
indexAxis: 'y',
|
|
legend: {
|
|
labels: {
|
|
generateLabels: function (chart) {
|
|
let labels = chart.data.labels;
|
|
let dataset = chart.data.datasets[0];
|
|
let legend = labels.map(function (label, index) {
|
|
return {
|
|
datasetIndex: 0,
|
|
fillStyle: dataset.backgroundColor && dataset.backgroundColor[index],
|
|
strokeStyle: dataset.borderColor && dataset.borderColor[index],
|
|
lineWidth: 0,
|
|
text: label
|
|
}
|
|
});
|
|
return legend;
|
|
}
|
|
},
|
|
onClick: null
|
|
},
|
|
|
|
scales: {
|
|
xAxes: [{
|
|
|
|
ticks: {
|
|
beginAtZero: true,
|
|
callback: function (value, index, values) {
|
|
if (value.length > 10) {
|
|
value = value.substring(0, 10) + "...";
|
|
}
|
|
return value;
|
|
},
|
|
},
|
|
}],
|
|
yAxes: [{
|
|
ticks: {
|
|
beginAtZero: true
|
|
}
|
|
}],
|
|
|
|
},
|
|
animation: animation,
|
|
title: {
|
|
display: (strTitle) ? true : false,
|
|
text: (strTitle) ? strTitle : ""
|
|
},
|
|
tooltips: {
|
|
callbacks: {
|
|
//label: function (tooltipItem) {
|
|
// console.log(tooltipItem)
|
|
// return tooltipItem.yLabel;
|
|
//},
|
|
//title: function (tooltipItem) {
|
|
// console.log(tooltipItem)
|
|
// return tooltipItem.xLabel
|
|
//}
|
|
}
|
|
},
|
|
},
|
|
|
|
}
|
|
let ctx = document.getElementById(cvsId).getContext("2d");
|
|
//window.myLine = new Chart(ctx, config);
|
|
return new Chart(ctx, config);
|
|
}
|
|
/*
|
|
* @deprecated since version 0.1
|
|
* @description 初始化Bar日期基本圖表
|
|
* @param {String} cvsId the canvas`s id
|
|
* @param {Array} aryLabelsX X軸標籤值(Date Array)
|
|
* @param {Array} aryVluesY Y軸量值(Integer Array)
|
|
* @param {String} strTitle the title of the chart;def value = null
|
|
* @returns {Object} chart element
|
|
*/
|
|
initBaseDate(cvsId, aryLabels, aryVlues, strTitle = null, chart = null) {
|
|
//function newDate(days) {
|
|
// return new YourTeam.Utility.DateHelper().getChangeDateTime(false, '/', 0, 0, days);
|
|
//}
|
|
if (chart !== null) {
|
|
chart.destroy();
|
|
}
|
|
let config = {
|
|
type: "bar",
|
|
data: {
|
|
//labels: [newDate(-5), newDate(-4), newDate(-3), newDate(-2), newDate(-1), newDate(0)],
|
|
labels: aryLabels,
|
|
datasets: [{
|
|
//data: [2, 5, 3, 4, 7, 3],
|
|
data: aryVlues,
|
|
borderColor: "rgba(220,20,20,1)",
|
|
backgroundColor: "rgba(220,20,20,0.5)"
|
|
}]
|
|
},
|
|
options: {
|
|
scales: {
|
|
xAxes: [{
|
|
type: "time",
|
|
time: {
|
|
unit: "day",
|
|
round: "day",
|
|
displayFormats: {
|
|
day: "YYYY/MM/DD"
|
|
}
|
|
}
|
|
}],
|
|
yAxes: [{
|
|
ticks: {
|
|
beginAtZero: true
|
|
}
|
|
}]
|
|
},
|
|
title: {
|
|
display: (strTitle) ? true : false,
|
|
text: (strTitle) ? strTitle : ""
|
|
},
|
|
|
|
}
|
|
}
|
|
let ctx = document.getElementById(cvsId).getContext("2d");
|
|
//window.myLine = new Chart(ctx, config);
|
|
return new Chart(ctx, config);
|
|
}
|
|
}
|
|
YourTeam.Chartjs.Bar = YourTeam.Chartjs.BarHelper || Bar;
|
|
|
|
|
|
|
|
class Pie {
|
|
constructor() {
|
|
}
|
|
/*
|
|
* @deprecated since version 0.1
|
|
* @description 初始化Pie基本圖表
|
|
* @param {String} cvsId the canvas`s id
|
|
* @param {Array} aryLabels 標籤值(String Array)
|
|
* @param {Array} aryVlues 量值(Integer Array)
|
|
* @param {String} strTitle the title of the chart;def value = null
|
|
* @param {Integer} borderWidth the width of the border;def value = 1
|
|
* @param {Array} aryStrBgColor the rgba or color code with the backaround;def value = null
|
|
* @param {Array} aryStrBorderColor the rgba or color code with the border;def value = null
|
|
* @returns {Object} chart element
|
|
*/
|
|
|
|
|
|
|
|
initBase(cvsId, aryLabels, aryVlues, strTitle = null, chart = null, borderWidth = 1, aryStrBgColor = null, aryStrBorderColor = null)
|
|
{
|
|
if (chart !== null) {
|
|
chart.destroy();
|
|
}
|
|
if (!aryStrBgColor) {
|
|
aryStrBgColor = [];
|
|
for (let i = 0; i < aryVlues.length; i++) {
|
|
aryStrBgColor.push('rgb(' + random(0, 255) + ', ' + random(0, 255) + ', ' + random(0, 255) + ')');
|
|
}
|
|
}
|
|
if (!aryStrBorderColor) {
|
|
aryStrBorderColor = [];
|
|
for (let i = 0; i < aryVlues.length; i++) {
|
|
aryStrBorderColor.push('rgb(255,255,255)');
|
|
}
|
|
}
|
|
let config = {
|
|
type: (aryVlues.length % 2) ? "doughnut" :"doughnut",
|
|
data: {
|
|
labels: aryLabels,
|
|
datasets: [{
|
|
data: aryVlues,
|
|
backgroundColor: aryStrBgColor,
|
|
borderColor: aryStrBorderColor,
|
|
borderWidth: borderWidth
|
|
}]
|
|
},
|
|
options: {
|
|
//cutoutPercentage: 40,
|
|
cutoutPercentage: 60,
|
|
maintainAspectRatio: false,
|
|
responsive: false,
|
|
legend: {
|
|
display: false,
|
|
},
|
|
|
|
title: {
|
|
display: (strTitle) ? true : false,
|
|
text: (strTitle) ? strTitle : ""
|
|
},
|
|
tooltips: {
|
|
position: 'nearest',
|
|
xAlign: "left",
|
|
yAlign: 'center'
|
|
}
|
|
}
|
|
}
|
|
let ctx = document.getElementById(cvsId).getContext("2d");
|
|
//window.myLine = new Chart(ctx, config);
|
|
return new Chart(ctx, config);
|
|
}
|
|
}
|
|
YourTeam.Chartjs.Pie = YourTeam.Chartjs.PieHelper || Pie;
|
|
|
|
|
|
function random(min, max) {
|
|
return Math.floor(Math.random() * max) + min;
|
|
} |