Javascript Flot图表-在单个html页面中处理多个Flot

我在单个图表和wan上实现了一个显示，以扩展解决方案，使3个图表具有相同的属性

具体而言：

我想启用选择缩放+双击以重置显示

我希望该系列的图例可以单击，以便该系列可以在每次单击时打开/关闭。 我成功地实现了基于

以下是我的原始代码（用咖啡脚本编写）：

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）”
#图表颜色默认值
$chrt_border_color=“#efefef”
$chrt_grid_color=“#DDD”
$chrt_main=“#E24913”
#红色的
$chrt_second=“#6595b4”
#蓝色的
$chrt_third=“#FF9F01”
#橙色的
$chrt_fourth=“#7e9d3a”
#绿色的
$chrt_fifth=“#BD362F”
#深红色
$chrt_mono=“#000”
图表=
生成的对象：（所有系列，所有系列数据）->
plotData=[]
对于系列，我在所有系列中
obj=
标签：series.replace/uuug/g，“|”
数据：所有系列数据[i]
颜色：colorArray[i]
#obj=(
#标签：系列
#console.log“推送系列#{series}”
#数据：所有系列数据[i]
#颜色：colorArray[i]
#console.log“将颜色#{color}推送到#{series}系列”
#   )
plotData.push对象
返回绘图数据
切换图：（seriesIdx）->
console.log“seriesIdx是：#{seriesIdx}”
someData=this.plot.getData（）
someData[seriesIdx-2].lines.show=不是someData[seriesIdx-2].lines.show
someData[seriesIdx-2].points.show=不是someData[seriesIdx-2].points.show
this.plot.setData someData
this.plot.draw（）
返回
getTooltip：（标签、xval、yval、flotItem）->
返回'+label+'+'+'
Build:'+flotItem.series.data[flotItem.dataIndex][2]+'+'+'
运行ID:{flotItem.series.data[flotItem.dataIndex][3].toString（）}“+'
结果：'+Chart.commify（yval）+”
委员会：（x）->
返回x.toString（）.replace（/\B（？=（\d{3}）+（？！\d））/g，“，”；
generateChartOptions：（图例_容器，记号）->
this.legendindex=0
返回(
系列：
线：
秀：真的
要点：
秀：真的
十字线：
模式：“x”
颜色：“FF9900”
图例：
容器：$（“#{legend#u container}”）
labelFormatter：（标签，系列）->
""
#labelFormatter：（标签，系列）->
#                   ""
无列：4
#隐藏的：真的
网格：
可悬停：正确
可点击：正确
tickColor:$chrt\u border\u color
边框宽度：0
边框颜色：$chrt\u border\u color
工具提示：正确
工具提示：
内容：Chart.getTooltip
#内容：“价值$x价值$y”，
defaultTheme:false
xaxis：
滴答声：滴答声
轮换工时：30
选择：
模式：“xy”
)
jQuery->
如果$（“#规格化的#bw#图表”）.length#仅当图表id存在时才渲染
原始数据=$（“#标准化图”）。数据（'结果'）
刻度=$（“#标准化的#bw#图表”）。数据（‘刻度’）
所有_系列=$（“#标准化_bw_图表”）。数据（‘系列’）
Chart.plot=$.plot（$（“#标准化#bw_图表”）、Chart.generateDataObjects（所有#系列、原始_数据）、Chart.generateChartOptions（'标准化#bw_图例'、记号））
如果$（“#并发#流#图表”）.length#仅当图表id存在时渲染
原始数据=$（“#并发流图”）。数据（'结果'）
滴答声=$（“#并发流图”）。数据（‘滴答声’）
all#U系列=$（“#并发#U流程图”）。数据（‘系列’）
Chart.plot=$.plot（$（“#并发流图”）、Chart.generateDataObjects（所有系列、原始数据）、Chart.generateChartOptions（“并发流图、图例、记号））
如果$（“#带宽#图表”）.length#仅当图表id存在时才渲染
原始数据=$（“#带宽图”）。数据（'结果'）
滴答声=$（“#带宽图”）。数据（‘滴答声’）
所有#u系列=$（“#带宽#u图表”）。数据（‘系列’）
Chart.plot=$.plot（$（“#带宽_图表”）、Chart.generateDataObjects（所有#系列、原始_数据）、Chart.generateChartOptions（“带宽#图例”、刻度））
$（'body'）。在“单击”、“a.legendtoggle”（事件）->
Chart.togglePlot（$（this.data（'index'））
返回错误
$（“[data behavior~=图表选择]”）。绑定“plotselected”（事件，范围）->
所选图表=$（this）.attr（'id'）[0…-6]#切片所选项目的名称
console.log（“放大到”+所选图表）
plot=$.plot（$（“#{选定的}}}}}}图表），plot.getData（），$.extend（true，{}，chart.generateChartOptions（选定的}图表+''图例'，记号），
xaxis：
最小值：ranges.xaxis.from
最大值：ranges.xaxis.to
亚克斯：
最小值：ranges.yaxis.from
最大值：ranges.yaxis.to
))
返回
$（“#标准化#bw#图表”）。绑定“选定的绘图”（事件，范围）->
#如果ranges.xaxis.to-ranges.xaxis.from<0.0005，则ranges.xaxis.to=ranges.xaxis.from+0.0005
#ranges.yaxis.to=ranges.yaxis.from+0.0005如果ranges.yaxis.to-ranges.ya
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: (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.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