标签：javascript jquery flot coffeescript

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。