javascript - node - Highcharts, Highstock sin jQuery

highcharts pie

Question

Entiendo que puedes usar:

$(element).highcharts("StockChart", {}) para obtener un gráfico de ese elemento.

Sin embargo, me gustaría poder obtener oro del objeto highchart para poder manipularlo después, o me gustaría hacer:

new Highcharts.Chart({
chart : {
renderTo : ''container''
type : ''StockChart''
}
...
});

En primer lugar : este último no funciona para el tipo ''StockChart''. Recibo el código de error 17 que dice:

"El tipo de serie solicitada no existe"

En segundo lugar , preferiría configurar la opción renderTo para un elemento en lugar de una identificación . Al usar una identificación, obliga a mi elemento a usar también una identificación, pero cuando puedo tener un contenedor y un subelement , se hace difícil hacer referencia a eso.

Ahora , si tiene muchos gráficos en una sola página html, los id no son ideales. Más bien, me gustaría utilizar el elemento dom real para pasar.

Al usar $(element).highcharts("StockChart", {}) pude establecer casi todas las demás opciones como globales, incluido rangeSelector y hacer que las cosas funcionen.

Sin embargo, todavía necesito poder acceder a this , que está disponible en funciones de eventos, como cargar, así que supongo que podría establecer uno global, pero podría ser un poco exagerado.

Answer 1

Veo tres preguntas en tu caso:

1) Para obtener un objeto al crear un gráfico, tiene dos formas:

• con jQuery:

  var chart = $(element).highcharts(''StockChart'', options).highcharts();

• sin jQuery:

  var chart = new Highcharts.StockChart(options);

2) Error n. ° 17:

"El tipo de serie solicitada no existe"

Es causado por type : ''StockChart'' . type está reservado para un tipo de serie. Como dijo @Raeen Hashemi , para crear Highstock, use un constructor diferente: new Highcharts.StockChart(options) .

3) Sí, puede pasar un objeto a renderTo : http://jsfiddle.net/yvxwa6oq/

new Highcharts.StockChart({
chart: {
renderTo: document.getElementsByClassName("container")[0]
},
series: [{
name: ''USD to EUR'',
data: [10, 20]
}]
});

4) this - honestamente, no estoy seguro de por qué necesita acceder a this en otro lugar que los controladores de eventos. En su lugar, use Highcharts.charts[index] o variables almacenadas como chart o $(element).highcharts()