JavaScript-Flot Charts-在单个HTML页面中处理多个浮动
作者：互联网
我有一个实现到单个图表的显示器,并且想要扩展解决方案,以便3个图表具有相同的属性.
特别：
>我要启用选择缩放双击以重置显示
>我希望该系列的图例可以单击,以便每次单击即可打开/关闭该系列.
我成功地基于previous posts实现了它们
Here’s a fiddle with 3 chart in a single page
这是我的原始代码(用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
实现此目的最有效的方法是什么(同时尝试避免代码重复)？
谢谢！！
解决方法:
创建图表/图表的数组
plotNames = ["bandwidth", "normalized_bw", "concurrent_flows"]
扩展您的togglePlot函数以使用一个绘图
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
并使用jQuery每个函数来创建不同的图并绑定它们的事件
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
完整代码请参见fiddle.
标签：javascript,jquery,flot,coffeescript 来源： https://codeday.me/bug/20191013/1909420.html