plotoptions - set series highcharts

Agregue información sobre herramientas a la leyenda en los gráficos superiores cuando se desplaza

Question

Deseo que el usuario sepa que puede eliminar elementos de la leyenda simplemente haciendo clic en ellos. Para algunos, esto puede ser intuitivo, pero otros pueden no saber que pueden hacer eso. Me gustaría informarles a los usuarios sobre el elemento de la leyenda que luego pueden hacer clic para eliminarlo.

Estoy usando la clase GWT-wrapper para Highcharts.

Gracias.

Answer 1

Highcharts no tiene información sobre herramientas incorporada para la leyenda del elemento, pero aún así puedes crear tu propia información sobre herramientas para eso. Es simple agregar eventos personalizados a legendItem (mouseover y mouseout por ejemplo) y mostrar esa información sobre herramientas.

Vea ejemplo de cómo agregar eventos a elementos en Highcharts: http://jsfiddle.net/rAsRP/129/

        events: {
            load: function () {
                var chart = this,
                    legend = chart.legend;

                for (var i = 0, len = legend.allItems.length; i < len; i++) {
                    (function(i) {
                        var item = legend.allItems[i].legendItem;
                        item.on(''mouseover'', function (e) {
                            //show custom tooltip here
                            console.log("mouseover" + i);
                        }).on(''mouseout'', function (e) {
                            //hide tooltip
                            console.log("mouseout" + i);
                        });
                    })(i);
                }

            }
        }

Answer 2

Hay otra oportunidad para obtener información sobre herramientas al pasar sobre la leyenda de Highcharts. Solo necesita habilitar useHTML para la leyenda y redefinir la función labelFormatter; esta función debe devolver el texto de la etiqueta encerrado en la etiqueta "span". En esta etiqueta "span" se puede incluir una clase para aplicar información sobre herramientas basada en jQuery (jQuery UI o Bootstrap, por ejemplo). También es posible transferir algunos datos (por ejemplo, el índice de un ítem de leyenda) usando el atributo ''data-xxx'':

labelFormatter: function () {
    return ''<span class="abc" data-index="'' + this.index + ''">'' + this.name + ''</span>'';
}

La información sobre herramientas se puede formatear como lo desee; hipervínculos también son posibles. El violín está aquí.

Answer 3

Usted puede hacer eso.

Al principio, Highcharts tiene una función de devolución de llamada.
https://.com/a/16191017

Y la versión modificada Tipsy puede mostrar información sobre herramientas en SVG.
http://bl.ocks.org/ilyabo/1373263
* Use jquery.tipsy.js y tipsy.css en esta página.

Luego, comience gráficos altos como este.

$(''#your-chart'').highcharts(your_chart_options,function(chart){
    $(''#your-chart'').find(''.highcharts-legend-item'').each(function(){
        // set title text example
        var _text = $(this).text(),
            _title = '''';
        switch(_text){
            case "legend 1":
                _title = ''legend 1 title'';
                break;
            case "legend 2":
                _title = ''legend 2 title'';
                break;
        }
        // add <title> tag to legend item
        $(this).append($(''<title></title>'').text(_title));
    });
    $(''#your-chart'').find(".highcharts-legend-item").tipsy({
        gravity: ''s'',
        fade: true
    })
});