我正在用 nodejs + express + ejs 构建一个系统......这个系统是一个图形面板,为此我选择使用新 Chartjs 2x 的 api......
我知道在客户端使用 Chartjs api,通常当我这样做时,我使用面向对象的 javascript 和 es6 ...
我遇到了什么问题?
当我使用 api 来生成图形时,我不知道图形的数量,更不用说相同的信息(到目前为止很好),但是当我尝试使用 nodejs 时,我想知道最好的我可以选择在服务器端随机生成这些动态图,直接发送到客户端。
我的问题是关于 EJS 中图形的生成和插入,主要是某些图形的操作。
功能示例:
class GraphBar extends Graph {
constructor(id){
super(id, 'bar');
}
/** @description: MANIPULAÇÃO DE DADOS NO GRÁFICO */
set data(value) { this.value = value; }
get data( ) { return this.value; }
addData(){
return {
labels: super.graphLabels,
datasets: [{
label: super.graphLabel,
data: super.graphData,
backgroundColor: super.graphBgColors,
borderColor: super.graphBorderColors,
borderWidth: 1
}]
};
}
addOptions(){
return {
legend: {
display: false
},
scales: {
yAxes: [{
display: false,
ticks: {
fontColor: "white",
beginAtZero:true
},
gridLines: {
display: false,
drawBorder: false
}
}],
xAxes: [{
display: true,
ticks: {
fontColor: "white",
beginAtZero: true,
display: false
},
gridLines: {
display: false,
drawBorder: false
}
}]
},
}
}
//NÚCLEOS DE PLUGINS DA API DO GRÁFICO
/** @description: APÓS O DESENHO DO DATASETS NO GRÁFICO */
afterDatasetDraw(){
return {
afterDatasetDraw: chartInstance => this.showValueOnTopBar(chartInstance)
}
}
/** @description: ANTES DE RENDERIZAR O GRÁFICO */
beforeRender(){
return {
beforeRender: chartInstance => this.showBarZeroValue(chartInstance)
}
}
//PLUGINS
/** @description: INSERE OS VALORES EM CIMA DO GRÁFICO */
showValueOnTopBar(chartInstance){
if(chartInstance !== undefined){
super.graphChangeFontStyleOnTopGraph(chartInstance, Chart.defaults.global.defaultFontFamily, '15', 'white', 'bold', 'center', 'bottom');
Chart.helpers.each(this.data.datasets.forEach((dataset, indexDataset) => {
Chart.helpers.each(chartInstance.getDatasetMeta(indexDataset).data.forEach((data, indexData) => {
const graphCenterPoint = data.getCenterPoint();
chartInstance.ctx.fillText(dataset.data[indexData], graphCenterPoint.x, graphCenterPoint.y);
}), this);
}), this);
}
}
/** @description: ALTERA O TAMANHO DAS BARRAS NO GRÁFICO, DE VALORES ENTRE 0 ~ -0.3 */
showBarZeroValue(chartInstance){
Chart.helpers.each(this.data.datasets.forEach((datasets, indexDataset) => {
Chart.helpers.each(chartInstance.getDatasetMeta(indexDataset).data.forEach((data, indexData) => {
const graphValue = datasets.data[indexData];
if(graphValue <= 0 && graphValue >= -0.3) {
const graphMeta = datasets._meta[0];
const graphModel = graphMeta.data[indexData]._model;
(graphValue >= -0.1) ? graphModel.y = (graphModel.base - 10) : graphModel.y = (graphModel.base + 10);
}
}), this);
}), this);
}
}
控制器示例:
module.exports.home = (app, req, res) => {
res.render('home/view', {
data: {
general: {
titlePage: 'TELA 1',
titleNavbar: 'ANALYTICAL PANEL',
mainIndicatorValue: '0 m²',
mainPercentageValue: '-100%',
}
},
check: {
general: {
hasHomePage: true,
hasShoppingPage: false,
hasShopkeeperPage: false,
hasShopkeeperDetailPage: false,
hasShopkeeperComparePage: false
},
api:{
hasConsuptionApi: false,
hasApiError: false
}
}
});
}
module.exports.homeConsumeApi = (app, req, res) => {
const apiDAO = new app.models.DAO.api(req, res);
apiDAO.getResponseAxios().then ( response => {
res.render('home/view', {
data: {
general: {
titlePage: 'TELA 1',
titleNavbar: 'ANALYTICAL PANEL'
},
api: { apiResponse: response.data }
},
check: {
general: {
hasHomePage: true,
hasShoppingPage: false,
hasShopkeeperPage: false,
hasShopkeeperDetailPage: false,
hasShopkeeperComparePage: false
},
api: {
hasConsuptionApi: true,
hasApiError: false
}
}
});
}).catch (error => {
res.render('home/view', {
data: {
general: {
titlePage: 'TELA 1',
titleNavbar: 'ANALYTICAL PANEL'
},
apiErrorMsg: {
Status: error.response.status,
StatusText: error.response.statusText
}
},
check: {
general: {
hasHomePage: true,
hasShoppingPage: false,
hasShopkeeperPage: false,
hasShopkeeperDetailPage: false,
hasShopkeeperComparePage: false
},
api: {
hasConsuptionApi: true,
hasApiError: true
}
}
});
});
}