ajax - graficas - highcharts php
HighCharts-Cómo crear un gráfico dinámico que exporta TODO (2)
sí, es posible y los gráficos Highcharts apoyan cosas que usted mencionó aquí es sample code http://jsfiddle.net/vijaykumarkagne/9c2vqq7q/ de Highchart dinámico utilizando datos json del archivo alojado en Google Drive.
$.getJSON("https://b943d995d961c8938d74bf398f8748e2b34864c6.googledrive.com/host/0B_i_hw1oG1HeaU9nMWxfTnJZd1k/data.json",{format:"json"},function(result){
chart = new Highcharts.Chart({
chart: {
zoomType: ''x'',
type: ''line'',
renderTo: ''container''
},
title: {
text: '' ''
},
subtitle: {
text: ''Click and drag in the plot area to zoom in'',
x: -20
},
xAxis: {
type: ''datetime'',
title: {
text: '' ''
}
},
yAxis: {
title: {
text: '' ''
}
},
series:[{
name: ''Tokyo'',
data: result
}]
});
});
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://b943d995d961c8938d74bf398f8748e2b34864c6.googledrive.com/host/0B_i_hw1oG1HeaU9nMWxfTnJZd1k/dataEmp.json"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<body>
<div id="container"></div>
</body>
Estoy intentando exportar un gráfico generado dinámicamente y me he dado cuenta de que algunas cosas no se exportan. Por ejemplo, mi gráfico tiene PlotBands que son dinámicos según los datos que se muestran.
Cuando construí mi gráfico, seguí el diseño de código estándar de todos los ejemplos de HighChart donde genere el gráfico inmediatamente en la carga del documento. Luego, más adelante en mi código, uso una llamada Ajax para cargar los datos y modificar cosas como títulos, bandas de trama, texto personalizado, etc.
El problema es que cualquier cosa modificada en el gráfico después de la carga del gráfico inicial no se exportará a imágenes o archivos PDF. Mis PlotBands se agregaron durante la llamada Ajax. No se pudieron incluir en el objeto de gráfico que se creó en document.load() . Así que fueron convenientemente ignorados por HighCharts.
En mi cuadro, quiero mostrar el uso de energía durante un período de 24 horas en diferentes sitios. El usuario puede elegir diferentes días y diferentes sitios. Las bandas de trama se necesitan para resaltar las horas de funcionamiento y cada sitio tiene diferentes horas de funcionamiento que se cargan con los datos. Además, el título del gráfico muestra el nombre del sitio y el subtítulo muestra el metraje cuadrado.
Además, mi código dibuja texto personalizado en la parte inferior del gráfico utilizando el comando HighCharts renderer text() .
Mi código para la exportación que apenas funciona se parece a esto:
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: "ChartContainer",
type: "line",
title: { text: null },
subtitle: { text: null }
}
}
});
function UpdateChart() {
$.ajax({
url: "/my/url.php",
success: function(json) {
chart.addSeries(json[1]);
chart.addSeries(json[2]);
chart.setTitle(json[0].title, json[0].subtitle);
chart.xAxis[0].addPlotBand({ color: "#FCFFB9", from: json[0].OpenInterval, to: json[0].CloseInterval, label: { text: "Operating Hours", verticalAlign: "bottom", y: -5, style: { fontSize: "8pt", color: "gray" } } });
chart.renderer.text("Custom Text", 50, 100);
}
});
}
Desafortunadamente, el título, las bandas argumentales y el "texto personalizado" no aparecerán si el usuario exporta el gráfico.
(respondiendo mi propia pregunta aquí)
La clave es reorganizar la forma en que construyes tu gráfico.
No genere la tabla en el document.load() . Generarlo en la función success() de la llamada ajax.
Primero, verifica si la tabla ya existe y destroy() . Si su código permite a los usuarios cambiar dinámicamente la configuración, eso provocará que se ejecute una nueva llamada ajax que necesitará actualizar el gráfico. El cuadro debe ser destruido antes de ser reconstruido.
Ahora construye un nuevo gráfico desde cero. Pero, ahora ya tiene los datos que necesita de la llamada ajax para que pueda compilarlos desde cero con la información correcta. HighCharts solo exportará los datos que se incluyeron la primera vez que se creó el gráfico. Entonces, todos los datos personalizados deben ser incluidos aquí. Si necesita cambiar algo en el gráfico, destrúyalo y recupérelo utilizando los datos personalizados.
function UpdateChart() {
$.ajax({
url: "/my/url.php",
success: function(json) {
// If the chart exists, destroy it
if (chart) chart.destroy();
// Create the chart
chart = new Highcharts.Chart({
chart: {
renderTo: "ChartContainer",
type: "line",
events: {
load: function(event) {
this.renderer.text("Custom Text", 50, 100);
}
},
title: { text: json[0].title },
subtitle: { text: json[0].sqft }
},
plotBands: {
color: "#FCFFB9",
from: json[0].OpenInterval,
to: json[0].CloseInterval,
label: {
text: "Store Hours", verticalAlign: "bottom", y: -5, style: { fontSize: "8pt", color: "gray" }
}
}
};
// Add two data series to the chart
chart.addSeries(json[1]);
chart.addSeries(json[2]);
// Set title and sub-title
chart.setTitle(json[0].title, json[0].subtitle);
}
});
}
Ahora, el cuadro mostrará todas las cosas personalizadas que ha agregado. Observe que el texto personalizado escrito en el gráfico con el comando renderer.text() se agrega en el evento chart.load() . Por alguna razón, solo funciona aquí.
Recuerde la clave: HighCharts solo exportará los datos que se incluyeron la primera vez que se creó el gráfico. Esto te ahorrará muchos dolores de cabeza.