Flot Charts - 在单个html页面中处理多个浮点 [英] Flot Charts - handling multiple flots in a single html page

问题描述

我有一个显示我实现了一个图表，并要扩展解决方案，使3个图表将具有相同的属性。

具体：

1. 我要启用选择缩放+双击重置显示




2. 我想要的系列的图例将是可点击的，这样系列将打开/关闭与每次点击。
   我成功地能够根据以前的帖子实现它们

这是我的原始代码（写在coffeescript中）：

  colorArray = [] 
 colorArray.pushrgba（180，0，75，0.6）
 colorArray.pushrgba 0，150，100，0.6）
 colorArray.pushrgba（0，0，255，0.6）
 colorArray.pushrgba（140，0，255，0.6）
 colorArray.pushrgba（90，180，20，0.6）
 colorArray.pushrgba（255，236，0，0.6）
 colorArray.pushrgba（234，170，21 ，0.6）
 colorArray.pushrgba（95，180，190，0.6）
 colorArray.pushrgba（214，92，63，0.6）
 colorArray.push rgba（218，106，234，0.6）
 colorArray.pushrgba（213，128，155，0.6）
 
＃图表颜色默认
 $ 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 = [] 
 
系列中的i，all_series中的i 
 obj = 
标签：series.replace / __ / g，| 
 data：all_series_data [i] 
 color：colorArray [i] 
 
＃obj =（
＃label：series 
＃console.log系列＃{series}
＃data：all_series_data [i] 
＃color：colorArray [i] 
＃console.log 
＃）
 plotData.push obj 
 
 return plotData 
 
 togglePlot：（seriesIdx） - > 
 console.logseriesIdx 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& flotItem.series.data [flotItem.dataIndex] [2] +'< / span>'+< br>运行ID：< strong>＃{flotItem.series.data [flotItem.dataIndex] [3]。 toString（）}< / strong> +'< br>结果：< 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>值< span> $ y< / span>，
 defaultTheme：false 
 
 xaxis：
 ticks：ticks 
 rotateTicks：30 
 
选择：
 mode：xy
）
 
 jQuery  - > 
如果$（＃normalized_bw_chart）。 -id存在
 
 raw_data = $（＃normalized_bw_chart）。data（'results'）
 ticks = $（＃normalized_bw_chart）。 $ b 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））
 
如果$（＃concurrent_flows_chart）。length＃仅当图表ID存在时渲染
 
 raw_data = $（＃concurrent_flows_chart）。data（'results'）
 ticks = $（＃concurrent_flows_chart）。data（'ticks'）
 all_series = 'series'）
 
 Chart.plot = $ .plot（$（＃concurrent_flows_chart），Chart.generateDataObjects（all_series，raw_data），Chart.generateChartOptions（'concurrent_flows_legend'，ticks））
 
 if $（＃bandwidth_chart）。length＃仅当图表ID存在时才显示
 
 raw_data = $（＃bandwidth_chart）。data（'results'） 
 ticks = $（＃bandwidth_chart）。data（'ticks'）
 all_series = $（＃bandwidth_chart）。data（'series'）
 
图表。 plot = $ .plot（$（＃bandwidth_chart），Chart.generateDataObjects（all_series，raw_data），Chart.generateChartOptions（'bandwidth_legend'，ticks））
 
 $（'body' 'click'，'a.legendtoggle'，（event） - > 
 Chart.togglePlot（$（this）.data（'index'））
 return false 
 
 $（[data-behavior〜= chart-selection] bindplotselected，（event，ranges） - > 
 selected_chart = $（this）.attr（'id'）[0 ...- 6]＃切分所选项目的名称
 console.log（放大到+ 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）。bindplotselected，（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]）。binddblclick，事件，pos，项目） - > 
 selected_chart = $（this）.attr（'id'）[0 ...- 6]＃切分所选项目的名称
 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）。binddblclick，（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 
））
 b $ b  

什么是最有效的方式来实现这一点（尽量避免代码重复） p>

感谢!!

解决方案

创建你的图表/ / p>

  plotNames = [bandwidth，normalized_bw，concurrent_flows] 
  / pre> 
 
 
扩展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 ，a.legendtoggle，（event） - >）上，使用下面的代码（raw_data），Chart.generateChartOptions（name +_ legend））
 
 $（＃+ name +_ legend ; 
 Chart.togglePlot（name，$（this）.data（'index'））
 return false 
 
 $（＃+ name +_ chart 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）。binddblclick，事件，pos，项目） - > 
 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 代表完整代码。
 
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页面中处理多个浮点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！