javascript - 图表 - 打开/关闭系列

Question

基于this previous post，我成功建立了我的图表

我想让观众通过点击来显示/隐藏系列。我找到了一堆解决方案，包括官方的和其他的，但没有一个对我有用。我会解释:

1. > Official turning series on/off : 这行得通，但看起来很乱，因为图例最终被复制了两次(一旦系列关闭，就会从官方图例中消失)。
2. > Hiddengraphs.js : 这是一个可以在插件库中找到的插件，但它不能正常工作并且与 Chrome 交互良好(尝试了不止一台机器，它就是不工作)。
3. > This solution实际上非常好(我不介意没有要检查的复选框)，但是当我将它集成到我的代码中时，我得到的只是“跳”到页面顶部，没有任何反应。
4. > Lastly, I found this solution ，虽然使用另一个名为 flot.togglelegend.js 的 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

这是一个 fiddle :http://jsfiddle.net/danklein/0tn1uzs9/3/

非常感谢!

Answer 1

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

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

2) labelFormatter 函数中的 series 对象没有 idx 属性，所以我在 Chart< 中使用了一个变量 对象:

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

3) 我还将您的 plot 对象放在 Chart 中，以便可以在 togglePlot 函数中访问它。我将 lines 更改为 points，因为您的数据每个系列只有一个数据点:

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

这应该是我改变的全部，但如果我得到了一切，请自己比较。
这是一个工作 fiddle :http://jsfiddle.net/jhpgtxz1/2/

PS:我再也不会使用 CoffeeScript :-(