本文介绍了Flot Charts - 在单个 html 页面中处理多个 flot的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着跟版网的小编来一起学习吧！
问题描述
I have a display I implemented to a single chart and wan to extend the solution so that 3 charts will have same properties.
specifically:
I want to enable selection zooming + double click to reset the display
I want the legend of the series will be clickable so that the series will turn on/off with each click. I was successfully able to implement them based on previous posts
Here's a fiddle with 3 chart in a single page
Here's my original code (written in 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]
# obj = (
# label: series
# console.log "pushing series #{series}"
# data: all_series_data[i]
# color: colorArray[i]
# console.log "pushing color #{color} to #{series} series"
# )
plotData.push obj
return plotData
togglePlot: (seriesIdx) ->
console.log "seriesIdx is: #{seriesIdx}"
someData = this.plot.getData()
someData[seriesIdx-2].lines.show = not someData[seriesIdx-2].lines.show
someData[seriesIdx-2].points.show = not someData[seriesIdx-2].points.show
this.plot.setData someData
this.plot.draw()
return
getTooltip: (label, xval, yval, flotItem) ->
return '<span class="label bg-color-teal txt-color-white">'+label+'</span>'+'<br>Build: <span>'+ flotItem.series.data[flotItem.dataIndex][2]+'</span>' +"<br>Run ID: <strong> #{flotItem.series.data[flotItem.dataIndex][3].toString()}</strong>" + '<br>Result: <span>'+Chart.commify(yval)+'</span>'
commify: (x) ->
return x.toString().replace(/B(?=(d{3})+(?!d))/g, ",");
generateChartOptions: (legend_container, ticks) ->
this.legendindex = 0
return (
series:
lines:
show: true
points:
show: true
crosshair:
mode: "x"
color: "#FF9900"
legend:
container: $("##{legend_container}")
labelFormatter: (label, series) ->
"<a href="javascript:void(0);" class="legendtoggle" data-index="" + Chart.legendindex++ + "">" + label + "</a>"
# 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')
Chart.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')
Chart.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')
Chart.plot = $.plot($("#bandwidth_chart"), Chart.generateDataObjects(all_series, raw_data), Chart.generateChartOptions('bandwidth_legend', ticks))
$('body').on 'click', 'a.legendtoggle', (event) ->
Chart.togglePlot($(this).data('index'))
return false
$("[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
$("#normalized_bw_chart").bind "plotselected", (event, ranges) ->
# ranges.xaxis.to = ranges.xaxis.from + 0.0005 if ranges.xaxis.to - ranges.xaxis.from < 0.0005
# ranges.yaxis.to = ranges.yaxis.from + 0.0005 if ranges.yaxis.to - ranges.yaxis.from < 0.0005
plot = $.plot($("#normalized_bw_chart"), plot.getData(), $.extend(true, {}, Chart.generateChartOptions('normalized_bw_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
$("#normalized_bw_chart").bind "dblclick", (event, pos, item) ->
plot = $.plot($("#normalized_bw_chart"), plot.getData(), $.extend(true, {}, Chart.generateChartOptions('normalized_bw_legend', ticks),
xaxis:
min: null
max: null
yaxis:
min: null
max: null
))
return
What would be the most efficient way to implement this (while trying to avoid code-duplication)?
Thanks!!
解决方案
Create an array of your plots / charts
plotNames = ["bandwidth", "normalized_bw", "concurrent_flows"]
extend your togglePlot function to work with one plot
togglePlot: (plotName, seriesIdx) ->
someData = this.plot[plotName].getData()
someData[seriesIdx].points.show = not someData[seriesIdx].points.show
this.plot[plotName].setData someData
this.plot[plotName].draw()
return
and use an jQuery each function to create the different plots and bind their events
jQuery.each plotNames, (index, name) ->
if $("#"+name+"_chart").length
Chart.plot[name] = $.plot($("#"+name+"_chart"), Chart.generateDataObjects(all_series, raw_data), Chart.generateChartOptions(name+"_legend"))
$("#"+name+"_legend").on 'click', 'a.legendtoggle', (event) ->
Chart.togglePlot(name, $(this).data('index'))
return false
$("#"+name+"_chart").bind "plotselected", (event, ranges) ->
Chart.plot[name] = $.plot($("#"+name+"_chart"), Chart.plot[name].getData(), $.extend(true, {}, Chart.generateChartOptions(name+'_legend'),
xaxis:
min: ranges.xaxis.from
max: ranges.xaxis.to
yaxis:
min: ranges.yaxis.from
max: ranges.yaxis.to
))
return
$("#"+name+"_chart").bind "dblclick", (event, pos, item) ->
Chart.plot[name] = $.plot($("#"+name+"_chart"), Chart.plot[name].getData(), $.extend(true, {}, Chart.generateChartOptions(name+'_legend'),
xaxis:
min: null
max: null
yaxis:
min: null
max: null
))
return
See this fiddle for the full code.
这篇关于Flot Charts - 在单个 html 页面中处理多个 flot的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！
本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益，请联系我们，我们会在确认后第一时间进行删除！