javascript - grafica - Highcharts-redraw() contra nuevo Highcharts.chart
highcharts php (4)
Estoy luchando por comprender la forma correcta de actualizar un gráfico de gráficos altos. Supongamos que he renderizado un gráfico, y luego quiero actualizarlo de alguna manera. Por ejemplo, es posible que desee cambiar los valores de la serie de datos, o tal vez quiera habilitar etiquetas de datos.
Por el momento, la única manera en que puedo descubrir cómo hacerlo es modificar las opciones de gráfico y usar el new Highcharts.chart para decir a los gráficos superiores que vuelvan a dibujar.
Sin embargo, me pregunto si esto puede ser excesivo y podría ser posible alterar el gráfico ''in situ'', sin tener que empezar de cero con el new Highcharts.chart . Noté que hay un método de redraw() , pero parece que no puedo hacer que funcione.
Cualquier ayuda es muy apreciada.
Gracias,
Robin
El código de muestra es el siguiente y en la parte inferior hay un jsFiddle
$(document).ready(function() {
chartOptions = {
chart: {
renderTo: ''container'',
type: ''area'',
},
series: [{
data: [1,2,3]
}]
};
chart1 = new Highcharts.Chart(chartOptions);
chartOptions.series[0].data= [10,5,2];
chart1 = new Highcharts.Chart(chartOptions);
//The following seems to have no effect
chart1.series[0].data = [2,4,4];
chart1.redraw();
});
[editar]:
Para cualquier espectador futuro de esta pregunta, vale la pena señalar que no existe un método para ocultar y mostrar DataLabels. A continuación, se muestra cómo hacerlo: http://jsfiddle.net/supertrue/tCF8Y/
@RobinL como se menciona en comentarios anteriores, puede usar chart.series [n] .setData (). Primero debe asegurarse de haber asignado una instancia de gráfico a la variable de gráfico, de esa forma adopta todas las propiedades y métodos que necesita para acceder y manipular el gráfico.
También utilicé el segundo parámetro de setData () y lo tenía como falso, para evitar la representación automática del gráfico. Esto se debe a que tengo varias series de datos, así que prefiero actualizar cada una de ellas, con render = false, y luego ejecutando chart.redraw (). Este rendimiento multiplicado (estoy teniendo 10,000-100,000 puntos de datos y actualizando el conjunto de datos cada 50 milisegundos).
debe llamar a establecer y agregar funciones en el objeto de gráfico antes de llamar a redibujar.
chart.xAxis[0].setCategories([2,4,5,6,7], false);
chart.addSeries({
name: "acx",
data: [4,5,6,7,8]
}, false);
chart.redraw();
chart.series[0].setData(data,true);
El método setData mismo llamará al método de redibujado
var newData = [1,2,3,4,5,6,7];
var chart = $(''#chartjs'').highcharts();
chart.series[0].setData(newData, true);
Explicación:
La variable newData contiene el valor que desea actualizar en el gráfico. La chart variables es un objeto de una tabla. setData es un método proporcionado por Highchart para actualizar los datos.
El método setData contiene dos parámetros, en el primer parámetro necesitamos pasar un nuevo valor como matriz y el segundo param es un valor booleano. Si es true entonces el gráfico se actualiza solo y si es false entonces tenemos que usar el método chart.redraw(); para actualizar el gráfico (es decir, chart.redraw(); )