浮点图 - 打开/关闭系列

我成功地建立了我的流程图，基于上一篇文章

我想让查看者通过单击即可显示/隐藏该系列。 我找到了很多解决方案，包括官方的和其他的，但没有一个对我有用。 我会解释一下：

1. 官方开启/关闭系列：这有效，但看起来非常混乱，因为图例最终被复制了两次（一旦系列关闭，就会从官方图例中消失）。
2. 隐藏图.js：这是一个可以在插件存储库中找到的插件，但它不能正常工作，也不能与 Chrome 很好地交互（尝试了不止一台机器，它就是不起作用）。
3. 这个解决方案实际上非常好（我不介意没有复选框可供检查），但是当我将它集成到我的代码中时，我得到的只是“跳”到页面顶部，并且没有任何反应。
4. 最后我找到了这个解决方案，尽管使用另一个 js 库，它也可以工作，称为flot.togglelegend.js。 在这个实现中我发现了一些主要的冲突flot.cust.js，并且无法让他们俩一起工作。

这是我当前的js（用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]

            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

这是一个小提琴：http://jsfiddle.net/danklein/0tn1uzs9/3/

多谢！

1) 当 onClick 的范围超出了 HTML 的范围时，直接在 HTML 中使用 onClick 是一个坏主意Chart对象不是全局的。我将其更改为 jquery 事件处理程序：

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

2) The series对象在labelFormatter函数没有idx属性，所以我在里面使用了一个变量Chart object:

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

3）我也把你的plot里面有物体Chart以便可以在内部访问它togglePlot功能。我改变了lines to points因为您的数据每个系列只有一个数据点：

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

这应该是我改变的全部，但是你自己比较一下我是否得到了一切。
这是一个工作小提琴：http://jsfiddle.net/jhpgtxz1/2/

PS：我再也不会用 CoffeeScript 了:-(