绘制图表 – 打开/关闭系列

基于之前的post ，我成功建立了我的flot图表

我想让观众能够通过点击显示/隐藏系列。 我找到了大量的解决方案，包括官方和其他人，但没有一个适合我。 我会解释一下：

1. 官方转动系列开/关 ：这是有效的，但看起来非常混乱，因为传说最终重复两次（一旦系列关闭就从官方传说中消失）。
2. Hiddengraphs.js ：这是一个可以在插件库中找到的插件，但它无法正常工作并与Chrome很好地交互（尝试了多台机器，它只是不起作用）。
3. 这个解决方案实际上非常好（我不介意没有要检查的复选框），但是当我将它集成到我的代码中时，我得到的只是“跳转”到页面顶部，没有任何反应。
4. 最后，我找到了这个解决方案 ，它也可以使用另一个名为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: '+ flotItem.series.data[flotItem.dataIndex][6]+'' +" | Run ID:  #{flotItem.series.data[flotItem.dataIndex][7].toString()}" + '
 Result: '+Chart.commify(yval)+'' 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) -> "" + label + "" 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 $x Value $y", 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/

非常感谢！

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) -> "" + label + "" 

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 

这应该是我改变的全部，但如果我得到了所有东西，请自己比较。
这是一个工作小提琴： http ： //jsfiddle.net/jhpgtxz1/2/

PS：再也没有CoffeeScript对我来说:-(