我有一个实现到单个图表的显示器,并且想要扩展解决方案,以便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.