Personalización de los botones selectores de rango de Stockchart de la biblioteca HighCharts en GWT (y Javascript en general)

Estoy usando la biblioteca HighCharts para GWT y tengo un problema.

Estoy intentando algo como esto: ejemplo de gráfico de cotizaciones. Lo único que me interesa para esta pregunta es el buttons propiedad dentro rangeSelector, en el que quiero personalizar los textos de los botones). En javascript el código es así:

rangeSelector: {
            buttons: [{
                type: 'day',
                count: 3,
                text: '3dias'
            }, {
                type: 'week',
                count: 1,
                text: '1w'
            }, {
                type: 'month',
                count: 1,
                text: '1m'
            }, {
                type: 'month',
                count: 6,
                text: '6MS'
            }, {
                type: 'year',
                count: 1,
                text: '1ano'
            }, {
                type: 'all',
                text: 'All'
            }],
            selected: 3
        }

Ahora estoy tratando de hacer lo mismo en GWT, usando el método setOption() en el gráfico. Pero nada parece funcionar.

Creo que estoy teniendo problemas porque el buttons property necesita una serie de propiedades, y eso es lo que no puedo resolver.

Algo que probé:

chart.setOption("/rangeSelector/buttons", 
      new String[]{"{type: 'day', count: 1, text: '1dia'}", "{type: 'day', count: 1, text: '1dia'}"});`

Esto es lo mejor que se me ocurrió, que crea dos botones vacíos y sin acciones.

Cualquier ayuda sería apreciada. Muchas gracias.

ACTUALIZACIÓN: (13 de diciembre de 2012)
Después de dar la respuesta aceptada, necesitaba configurar el ancho del botón. Para eso solo usa:

buttonTheme: {
    width: 80
}

algo como: 

rangeSelector: {
                selected: 2,
                inputBoxStyle: {
                    top: '40px',
                    right: '10px'},
                buttons: [{
                    type: 'week',
                    count: 1,
                    text: '1 semana'
                }],
                buttonTheme: {
                    width: 80
                }
            }

preguntado el 29 de agosto de 12 a las 14:08

1 Respuestas

¿Podría intentar lo siguiente:

 String rangeSelectorConfig =  " {\n" +
            "                buttons: [{\n" +
            "                    type: 'day',\n" +
            "                    count: 3,\n" +
            "                    text: '3dias'\n" +
            "                }, {\n" +
            "                    type: 'week',\n" +
            "                    count: 1,\n" +
            "                    text: '1w'\n" +
            "                }]" +
            "            }" ;
 JSONValue config = JSONParser.parseLenient(rangeSelectorConfig);
 chart.setOption("/rangeSelector", config);

Chart clase (con la ayuda de Configurable) no analiza los objetos JSON por usted, por lo que los botones en su código se pasaron como cadenas literales a HightCharts JS nativo.

Respondido 29 ago 12, 16:08

¡Eso funciono! Muchísimas gracias. Sin embargo, solo una pregunta, ¿por qué pusiste el "\n" allí? ¿Algún motivo en especial? Lo pregunto porque funciona sin ellos. - Nuno Gonçalves

Es solo una sugerencia de formato de mi IDEA :), al copiar/pegar literales de cadena en código Java. No hay razones para agregarlos. - událmik

Ah, ok, pensé que podría ser cualquier tipo de patrón, o una buena práctica o algo así. Sólo una pregunta más, si sabes. ¿Es posible cambiar la longitud de los botones? Porque ahora, si agrego textos más largos, será complicado. - Nuno Gonçalves

No estoy seguro, en realidad. Pero, ¿ha intentado simplemente pasar el atributo 'ancho' por 'botón'? - událmik

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.