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í :-(