Javascript Flot图表-打开/关闭系列

我成功地建立了我的flot图表，基于

我想通过单击使查看器能够显示/隐藏该系列。 我找到了很多解决方案，包括官方的和其他的，但没有一个对我有效。 我会解释：

：这是可行的，但看起来非常混乱，因为传说最终被复制了两次（一旦系列关闭，从官方传说中消失）

：这是一个可以在插件库中找到的插件，但它不工作，并且与Chrome的交互也不好（尝试了多台机器，就是不工作）

它实际上非常好（我不介意没有复选框可以选中），但是当我将它集成到我的代码中时，我得到的只是“跳转”到页面顶部，什么都没有发生

，尽管使用另一个js库，名为

flot.togglegend.js

，但它也可以工作。 在这个实现中，我发现了与

flot.cust.js

的一些主要冲突，无法让它们一起工作 这是我当前的js（用咖啡脚本编写）

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]
plotData.push对象
返回绘图数据
切换图：（seriesIdx）->
someData=plot.getData（）
someData[seriesIdx].lines.show=不是someData[seriesIdx].lines.show
plot.setData someData
绘图
返回
getTooltip：（标签、xval、yval、flotItem）->
返回'Build:'+flotItem.series.data[flotItem.dataIndex][6]+''+''|运行ID:{flotItem.series.data[flotItem.dataIndex][7].toString（）}“+'
结果：'+Chart.commify（yval）+”
委员会：（x）->
返回x.toString（）.replace（/\B（？=（\d{3}）+（？！\d））/g，“，”；
generateChartOptions：（图例_容器，记号）->
返回(
系列：
线：
秀：真的
要点：
秀：真的
十字线：
模式：“x”
图例：
容器：$（“#{legend#u container}”）
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_图表”）。数据（‘系列’）
plot=$.plot（$（“#标准化的#bw_图表”）、chart.generateDataObjects（所有#系列、原始_数据）、chart.generateChartOptions（“标准化的#bw_图例”，记号））
如果$（“#并发#流#图表”）.length#仅当图表id存在时渲染
原始数据=$（“#并发流图”）。数据（'结果'）
滴答声=$（“#并发流图”）。数据（‘滴答声’）
all#U系列=$（“#并发#U流程图”）。数据（‘系列’）
plot=$.plot（$（“#并发流图”）、chart.generateDataObjects（所有#系列、原始#数据）、chart.generateChartOptions（“并发流图”、“记号”）
如果$（“#带宽#图表”）.length#仅当图表id存在时才渲染
原始数据=$（“#带宽图”）。数据（'结果'）
滴答声=$（“#带宽图”）。数据（‘滴答声’）
所有#u系列=$（“#带宽#u图表”）。数据（‘系列’）
plot=$.plot（$（“#带宽图”）、chart.generateDataObjects（所有#系列、原始#数据）、chart.generateChartOptions（'带宽#图例'、刻度））
$（“[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
))
返回
$（“[data behavior~=图表选择]”）。绑定“dblclick”，（事件、位置、项目）->
所选图表=$（this）.attr（'id'）[0…-6]#slici
    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]

            plotData.push obj

        return plotData

    togglePlot: (seriesIdx) ->
        someData = plot.getData()
        someData[seriesIdx].lines.show = not someData[seriesIdx].lines.show
        plot.setData someData
        plot.draw()
        return  

    getTooltip: (label, xval, yval, flotItem) ->
            return 'Build: <span>'+ flotItem.series.data[flotItem.dataIndex][6]+'</span>' +" |     Run ID: <strong> #{flotItem.series.data[flotItem.dataIndex][7].toString()}</strong>" + '<br> Result: <span>'+Chart.commify(yval)+'</span>'

    commify: (x) ->
        return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");

    generateChartOptions: (legend_container, ticks) ->
        return (
            series:
                lines:
                    show: true

                points:
                    show: true

            crosshair:
                mode: "x"

            legend:
                container: $("##{legend_container}")
                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')

            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')

            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')

            plot = $.plot($("#bandwidth_chart"), Chart.generateDataObjects(all_series, raw_data), Chart.generateChartOptions('bandwidth_legend', ticks))    

        $("[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

        $("[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

$('body').on 'click', 'a.legendtoggle', (event) ->
    Chart.togglePlot($(this).data('index'))
    return false

labelFormatter: (label, series) ->
    "<a href=\"#\" class=\"legendtoggle\" data-index=\"" + Chart.legendindex++ + "\">" + label + "</a>"

togglePlot: (seriesIdx) ->
    someData = this.plot.getData()
    someData[seriesIdx].points.show = not someData[seriesIdx].points.show
    this.plot.setData someData
    this.plot.draw()
    return