Guardar pdf no muestra gráfico
Pregunta
-
tengo un problema resulta que estoy trabajando con un proyecto en MVC 2 con aspx y en local tengo una opción que es "descargar PDF" y muestra unos valores y un gráfico en js de Echarts (NO CANVAS) resulta que todo funciona perfecto pero al momento de pasar el proyecto a productivo la opción Descargar PDF tarda más de lo normal y además no me muestra el gráfico. acá el código C#.
public ActionResult Print(string fecha, string zonas, string empresas)// metodo action result que llena el PDF para posteriormente descargarlo // resive los filtros y toma la fecha que se muestra en el campo fecha inicio del navegador, para que el bucle de busqueda incluido en el metodo minimotecnico no tenga que ejecutarse denuevo { double iny, ret, bal, ingr, ingresoAdicional; string[] seriesgrafico = new string[1]; // inicializacion para las series del grafico, posteriormente debe llenarse con una segunda serie en el Controlador de Estudio seriesgrafico[0] = "Datos";// Nombre de la serie, se muestra en el grafico y es pasado al campo Leyenda del script del grafico if (zonas == null) {// en caso de que la zona/empresa esten null vale decir al comienzo o al actualizar la pagina, // las deja con el caracter " " para que este titulo no en vea en el PDF zonas = ""; } if (empresas == null) { empresas = ""; } DateTime mescondatos = new DateTime(); mescondatos = Convert.ToDateTime(fecha);//convierte el string obtenido desde la vista, para poder ser procesado como DATETIME // mescondatos = mescondatos.AddMonths(1);// Se le suma un mes para que sea restado en minimotecnico y encuentre de inmediato el mes que contiene datos //Comente esta linea puesto que buscaba datos que aun no existian y entraba a un bucle infinito. cm.minimotecnico = minimoTecnico(today1, zonas, empresas);// minimo tecnico siempre debe ser el primer metodo en ser llamado, puesto que tambien obtiene la fecha a presentar en la vista cm.costomarginal = costoMarginal(today1, zonas, empresas); cm.ingresoscompania = ingresoCompania(today1, zonas, empresas); cm.costooperacional = costoOperacion(today1, zonas, empresas); ingr = ingresoTarifario(today1, zonas, empresas); cm.ingresotarifario = ingr.ToString("C", nfi); ingresoAdicional = ingresoTarifarioAdicional(today1, zonas, empresas); cm.ingresotarifarioAdicional = ingresoAdicional.ToString("C", nfi); cm.margenoperativo = margenOperativo(today1, zonas, empresas); iny = inyecciones(today1, zonas, empresas); cm.inyecciones = iny.ToString("N", nfi);// el argumento "N" indica que es una cifra numerica y "nfi" es la variable que indica el pais de formato ret = retiros(today1, zonas, empresas); cm.retiros = ret.ToString("N", nfi); cm.inyeccionesVAL = inyeccionesValorizadas(today1, zonas, empresas); cm.retirosVAL = retirosValorizados(today1, zonas, empresas); bal = balanceValorizados(today1, zonas, empresas); cm.balanceEnergiaReal = balanceEnergiaReal(bal, ingr, ingresoAdicional); cm.balanceFisico = balanceFisico(iny, ret); cm.balanceVAL = bal.ToString("C", us); cm.balanceReal = balanceReal(bal, ingr); cm.fechainicio = inicio.ToString("dd-MMM-yyyy", CultureInfo.CreateSpecificCulture("es-CL"));// formato para la fecha MMM significa el mes se motrara abreviado, el segundo argumento es el formato de fecha chileno cm.fechafin = fin.ToString("dd-MMM-yyyy", CultureInfo.CreateSpecificCulture("es-CL")); cm.fechagrafico = mescondatos.ToString("MMMM yyyy", CultureInfo.CreateSpecificCulture("es-CL"));// MMMM significa que se mostrara el nombre del mes completo. cm.cantidaddias = new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(graficodays);// depende de funcion margenOperativo cm.valordiario = new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(valorgraficodiario); int[] valorestudio = new int[valorgraficodiario.Length];//cantidad de dias del grafico estudio se iguala al de los datos para que no se vean puesto que se superponen // posteriormente en el controlador de estudio esto debe ser cambiado al total de dias del mes y la cantidad de dias de datos // debe ser modicado a la cantidad de dias con datos existentes en la BD, para que solo se vean los datos hasta el dia con datos en la BD // y los datos de estudio o predecidos por formulas se muestren a continuacion de los datos existentes y con un color diferente for (int i = 0; i < valorgraficodiario.Length; i++) { valorestudio[i] = 0;// los datos para cada dia del estudio o predecido por formula, deben ser llenados a partir de un dia despues del ultimo dato normal existente, // por ahora vacio puesto que esto se debe hacer el el controlador estudio } cm.valorestudio = new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(valorestudio);// esta funcion convierte el array en otro array pero con un formato aceptado por javascript ViewBag.estudio = new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(seriesgrafico); ViewBag.titulo = "MVEL";// titulo que se muestra oculto bajo el header en el pdf ViewBag.titulopdf = "(Cierre " + zonas + " " + empresas + " )";// se miestra el titulo en el pdf para diferenciar cuando esta en cada filtro, debe replicarse para los otros ambientes return new ViewAsPdf("~/Views/Cierre/Cierre.aspx", cm)// retorna el modelo para llenar el pdf { FileName = "Reporte_Ambiente_cierre.pdf",// nombre del archivo pdf que se descargara PageSize = Rotativa.Options.Size.Letter, // tamaño de pagina en que vengra el pdf CustomSwitches = "--header-line --header-spacing 100 "// este paramentro no esta funcionado peusto que la libreria no reconoce el header del html con uno para el pdf }; }Acá el código aspx:
<button type="button" class="btn btn-secondary btn-md" onclick="location.href ='<%= Url.Action("Print", "Cierre", new { fecha = Model.fechapdf, zonas = Model.zona, empresas = Model.empresa })%>'" style="margin-" > <span class="glyphicon glyphicon glyphicon-save-file" aria-hidden="true"></span> Descargar PDF </button>
Acá el JS del gráfico realizado con Echarts:
<script type="text/javascript"> // inicializa var myChart = echarts.init(document.getElementById('main')); //configuracion de datos e items var dataAxis = <%=Model.cantidaddias%>; var data = <%=Model.valordiario %>; var dataestudio= <%=Model.valorestudio%>; var series = ["Margen_operativo"]; var yMax = 0; var dataShadow = []; var titulo = " <%=Model.fechagrafico %> "; for (var i = 0; i < dataestudio.length; i++) { dataShadow.push(yMax); } option = { tooltip:{ trigger: 'axis', //show: true, //default true showDelay: 0, hideDelay: 50, transitionDuration:0, backgroundColor: '#41b9e6', borderColor: '#ff5a0f', borderRadius : 8, borderWidth: 0, padding: 8, // [5, 10, 15, 20] // console.log && console.log(p); return [p[0] + 10, p[1] - 10]; }, textStyle : { color: 'white', decoration: 'none', fontFamily: 'Univers Bold', fontSize: 14, fontWeight: 'bold' }, formatter: function (params,ticket,callback) { console.log(params) var res = '' for (var i = 1, l = params.length-1; i < l; i++) { res +="Día "+ params[i].name +": "+ params[i].value; } //setTimeout(function (){ // callback(ticket, res); //}, 1000) return 'Cargando...'; } }, title: { text: titulo, }, legend: { data:series }, xAxis: { data: dataAxis, axisLabel: { inside: false, textStyle: { color: '#fff' } }, axisTick: { show: false }, axisLine: { show: false }, z: 10 }, yAxis: { axisLine: { show: false }, axisTick: { show: false }, axisLabel: { textStyle: { color: '#999' } } }, dataZoom: [ { type: 'inside' } ], series: [ { // For shadow type: 'bar', itemStyle: { normal: { color: 'rgba(0,0,0,0.05)' } }, barGap: '-100%', barCategoryGap: '40%', data: dataShadow, animation: false }, { name:'Margen_operativo', type: 'bar', itemStyle: { normal: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ { offset: 0, color: '#83bff6' }, { offset: 0.5, color: '#188df0' }, { offset: 1, color: '#188df0' } ] ) }, emphasis: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ { offset: 0, color: '#2378f7' }, { offset: 0.7, color: '#2378f7' }, { offset: 1, color: '#83bff6' } ] ) } } , data: data }, { name:'Estudio', type:'bar', itemStyle: { normal: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ {offset: 0, color: '#FEFF92'}, {offset: 0.5, color: '#FDFF53'}, {offset: 1, color: '#FDFF53'} ] ) }, emphasis: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ {offset: 0, color: '#FDFF00'}, {offset: 0.7, color: '#FDFF00'}, {offset: 1, color: '#FEFF92'} ] ) } }, data:dataestudio }, ] }; //window.onresize = function(){ // if(myChart != null && myChart != undefined){ // myChart.resize(); // } //}; // zoom del grafico. //var zoomSize = 6; //myChart.on('click', // function(params) { // console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]); // myChart.dispatchAction({ // type: 'dataZoom', // startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)], // endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)] // }); // }); // use configuration item and data specified to show chart myChart.setOption(option); /* Le otorga la propiedad responsive al grafico */ $( document ).ready(function() { var main=$('<div id="main" style=" width: 100%; min-height: 400px"></div>'); $('#main').replaceWith(main); var myChart = echarts.init(document.getElementById('main')); //configuracion de datos e items var dataAxis = <%=Model.cantidaddias%>; var data = <%=Model.valordiario %>; var dataestudio= <%=Model.valorestudio%>; var series = ["Margen_operativo"]; var yMax = 0; var dataShadow = []; var titulo = " <%=Model.fechagrafico %> "; for (var i = 0; i < dataestudio.length; i++) { dataShadow.push(yMax); } option = { tooltip:{ trigger: 'axis', //show: true, //default true showDelay: 0, hideDelay: 50, transitionDuration:0, backgroundColor: '#41b9e6', borderColor: '#ff5a0f', borderRadius : 8, borderWidth: 0, padding: 8, // [5, 10, 15, 20] // console.log && console.log(p); return [p[0] + 10, p[1] - 10]; }, textStyle : { color: 'white', decoration: 'none', fontFamily: 'Univers Bold', fontSize: 14, fontWeight: 'bold' }, formatter: function (params,ticket,callback) { console.log(params) var res = '' for (var i = 1, l = params.length-1; i < l; i++) { res +="Día "+ params[i].name +": "+ params[i].value; } setTimeout(function (){ callback(ticket, res); }, 1000) return 'Cargando...'; } }, title: { text: titulo, }, legend: { data:series }, xAxis: { data: dataAxis, axisLabel: { inside: false, textStyle: { color: '#fff' } }, axisTick: { show: false }, axisLine: { show: false }, z: 10 }, yAxis: { name: 'KWH/dia', axisLine: { show: false }, axisTick: { show: false }, axisLabel: { textStyle: { color: '#999' } } }, dataZoom: [ { type: 'inside' } ], series: [ { // For shadow type: 'bar', itemStyle: { normal: { color: 'rgba(0,0,0,0.05)' } }, barGap: '-100%', barCategoryGap: '40%', data: dataShadow, animation: false }, { name:'Margen_operativo', type: 'bar', itemStyle: { normal: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ { offset: 0, color: '#83bff6' }, { offset: 0.5, color: '#188df0' }, { offset: 1, color: '#188df0' } ] ) }, emphasis: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ { offset: 0, color: '#2378f7' }, { offset: 0.7, color: '#2378f7' }, { offset: 1, color: '#83bff6' } ] ) } } , data: data }, { name:'Estudio', type:'bar', itemStyle: { normal: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ {offset: 0, color: '#FEFF92'}, {offset: 0.5, color: '#FDFF53'}, {offset: 1, color: '#FDFF53'} ] ) }, emphasis: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ {offset: 0, color: '#FDFF00'}, {offset: 0.7, color: '#FDFF00'}, {offset: 1, color: '#FEFF92'} ] ) } }, data:dataestudio }, ] }; window.onresize = function(){ if(myChart != null && myChart != undefined){ myChart.resize(); } }; // zoom del grafico. var zoomSize = 6; myChart.on('click', function(params) { console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]); myChart.dispatchAction({ type: 'dataZoom', startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)], endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)] }); }); // use configuration item and data specified to show chart myChart.setOption(option); }); </script>
Imagen PDF en local:
Imagen PDF Productivo:
de corazón solicito la ayuda de todos ustedes
Joel Baez
