javascript - examples - flot-chart-content

Flot charts: activar/desactivar una serie

Question

Establecí con éxito mi diagrama flotante, basado en esta publicación anterior

Quiero habilitar al espectador para mostrar / ocultar la serie con un clic. Encontré un montón de soluciones, tanto oficiales como otras, pero ninguna de ellas me funcionó. Lo explicaré:

1. Series de encendido / apagado oficiales : esto funciona, pero se ve muy desordenado ya que la leyenda finalmente se duplicará dos veces (desaparece de la leyenda oficial una vez que la serie se apaga).
2. Hiddengraphs.js : este es un complemento que se puede encontrar en el repositorio de complementos, pero no funciona e interactúa bien con Chrome (lo intenté con más de una máquina, simplemente no funciona).
3. Esta solución es realmente agradable (no me importa que no haya casillas de verificación para verificar), pero cuando la integé en mi código, todo lo que obtuve fue "saltar" a la parte superior de la página y no ocurre nada.
4. Por último, encontré esta solución , que también funciona, aunque usa otra biblioteca js, llamada flot.togglelegend.js . En esta implementación encontré algunos conflictos importantes con flot.cust.js , y no pude conseguir que ambos trabajaran juntos.

Aquí está mi js actual (escrito en coffeescript)

    colorArray = []
    colorArray.push "rgba(180, 0, 75,    0.6)"
    colorArray.push "rgba(0, 150, 100,   0.6)"
    colorArray.push "rgba(0, 0, 255,     0.6)"
    colorArray.push "rgba(140, 0, 255,   0.6)"
    colorArray.push "rgba(90, 180, 20,   0.6)"
    colorArray.push "rgba(255, 236, 0,   0.6)"
    colorArray.push "rgba(234, 170, 21,  0.6)"
    colorArray.push "rgba(95, 180, 190,  0.6)"
    colorArray.push "rgba(214, 92, 63,   0.6)"
    colorArray.push "rgba(218, 106, 234, 0.6)"
    colorArray.push "rgba(213, 128, 155, 0.6)"

    # chart colors default 
    $chrt_border_color = "#efefef"
    $chrt_grid_color = "#DDD"
    $chrt_main = "#E24913"

    # red       
    $chrt_second = "#6595b4"
    # blue      
    $chrt_third = "#FF9F01"
    # orange    
    $chrt_fourth = "#7e9d3a"
    # green     
    $chrt_fifth = "#BD362F"
    # dark red  
    $chrt_mono = "#000"

    Chart = 

    generateDataObjects: (all_series, all_series_data) ->
        plotData = []

        for series, i in all_series
            obj =
                label: series.replace /__/g, "|"
                data: all_series_data[i]
                color: colorArray[i]

            plotData.push obj

        return plotData

    togglePlot: (seriesIdx) ->
        someData = plot.getData()
        someData[seriesIdx].lines.show = not someData[seriesIdx].lines.show
        plot.setData someData
        plot.draw()
        return  

    getTooltip: (label, xval, yval, flotItem) ->
            return ''Build: <span>''+ flotItem.series.data[flotItem.dataIndex][6]+''</span>'' +" |     Run ID: <strong> #{flotItem.series.data[flotItem.dataIndex][7].toString()}</strong>" + ''<br> Result: <span>''+Chart.commify(yval)+''</span>''

    commify: (x) ->
        return x.toString().replace(//B(?=(/d{3})+(?!/d))/g, ",");

    generateChartOptions: (legend_container, ticks) ->
        return (
            series:
                lines:
                    show: true

                points:
                    show: true

            crosshair:
                mode: "x"

            legend:
                container: $("##{legend_container}")
                labelFormatter: (label, series) ->
                    "<a href=/"javascript:void(0);/" onClick=/"Chart.togglePlot(" + series.idx + "); return false;/">" + label + "</a>"
                noColumns: 4
                # hideable: true

            grid:
              hoverable: true
              clickable: true
              tickColor: $chrt_border_color
              borderWidth: 0
              borderColor: $chrt_border_color

            tooltip: true
            tooltipOpts: 
              content : Chart.getTooltip
              #content : "Value <b>$x</b> Value <span>$y</span>",
              defaultTheme: false

            xaxis:
                ticks: ticks
                rotateTicks: 30

            selection:
                mode: "xy"
            )



     jQuery ->
        if $("#normalized_bw_chart").length         # render only if the chart-id is present

            raw_data = $("#normalized_bw_chart").data(''results'')
            ticks = $("#normalized_bw_chart").data(''ticks'')
            all_series = $("#normalized_bw_chart").data(''series'')

            plot = $.plot($("#normalized_bw_chart"), Chart.generateDataObjects(all_series, raw_data), Chart.generateChartOptions(''normalized_bw_legend'', ticks))    

        if $("#concurrent_flows_chart").length      # render only if the chart-id is present

            raw_data = $("#concurrent_flows_chart").data(''results'')
            ticks = $("#concurrent_flows_chart").data(''ticks'')
            all_series = $("#concurrent_flows_chart").data(''series'')

            plot = $.plot($("#concurrent_flows_chart"), Chart.generateDataObjects(all_series, raw_data), Chart.generateChartOptions(''concurrent_flows_legend'', ticks))

        if $("#bandwidth_chart").length         # render only if the chart-id is present

            raw_data = $("#bandwidth_chart").data(''results'')
            ticks = $("#bandwidth_chart").data(''ticks'')
            all_series = $("#bandwidth_chart").data(''series'')

            plot = $.plot($("#bandwidth_chart"), Chart.generateDataObjects(all_series, raw_data), Chart.generateChartOptions(''bandwidth_legend'', ticks))    

        $("[data-behavior~=chart-selection]").bind "plotselected", (event, ranges) ->
                selected_chart = $(this).attr(''id'')[0...-6] # slicing the name of the selected item
                console.log  ("zooming in to " + selected_chart)
                plot = $.plot($("##{selected_chart}_chart"), plot.getData(), $.extend(true, {}, Chart.generateChartOptions(selected_chart+''_legend'', ticks),
                  xaxis:
                    min: ranges.xaxis.from
                    max: ranges.xaxis.to

                  yaxis:
                    min: ranges.yaxis.from
                    max: ranges.yaxis.to
                ))
             return

        $("[data-behavior~=chart-selection]").bind "dblclick", (event, pos, item) ->
                selected_chart = $(this).attr(''id'')[0...-6] # slicing the name of the selected item
                console.log  ("zooming out to " + selected_chart)
                plot = $.plot($("##{selected_chart}_chart"), plot.getData(), $.extend(true, {}, Chart.generateChartOptions(selected_chart+''_legend'', ticks),
                  xaxis:
                    min: null
                    max: null
              yaxis:
                min: null
                max: null
            ))
         return

aquí hay un violín: http://jsfiddle.net/danklein/0tn1uzs9/3/

¡muchas gracias!

Answer 1

1) OnClick directamente en el HTML es una mala idea cuando el alcance del objeto Chart no es global. Lo cambié a un manejador de eventos jquery:

$(''body'').on ''click'', ''a.legendtoggle'', (event) ->
    Chart.togglePlot($(this).data(''index''))
    return false

2) El objeto series en la función labelFormatter no tiene propiedad idx , así que usé una variable dentro del objeto Chart :

labelFormatter: (label, series) ->
    "<a href=/"#/" class=/"legendtoggle/" data-index=/"" + Chart.legendindex++ + "/">" + label + "</a>"

3) También coloque su objeto de plot dentro de Chart para que se pueda acceder dentro de la función togglePlot . Y cambié las lines a points ya que sus datos solo tienen un punto de datos por serie:

togglePlot: (seriesIdx) ->
    someData = this.plot.getData()
    someData[seriesIdx].points.show = not someData[seriesIdx].points.show
    this.plot.setData someData
    this.plot.draw()
    return

Eso debería ser todo lo que cambié, pero compárelo si tengo todo.
Aquí hay un violín funcional: http://jsfiddle.net/jhpgtxz1/2/

PD: Nunca más CoffeeScript para mí :-(