浮动图例，如何隐藏但使用颜色瓷砖

Question

我的浮点图有自定义图例，我添加了复选框以允许用户打开和关闭系列。默认图例必须设置为 true 才能使我的图例具有色板。如果有办法摆脱默认图例，但保留自定义图例的色板，我很感兴趣？下面是一些sn-ps来展示我在做什么：

var options = {
    legend: {
        show: true,
        container: legendcontainer,
        noColumns: 2,
        sorted: false
    },
    series: {
        points: {
            show: false
        },
        lines: {
            show: true
        }
    },
    grid: {
        hoverable: true
    },
    xaxes: [{
        axisLabel: 'Frequency (Hz)',
    }],
    yaxes: [{
        axisLabel: 'Power (dB)',
    }],
    crosshair: {
        mode: "xy",
        color: 001,
        lineWidth: .5
    }
};

$.each(results, function(key, val) {
     track = track + 1;
    val.color = i;
    ++i;
    l = val.label; 
     if (track == 1){
        temp.append(row);
        row.append(cell);
        cell.append('Left Channel');
     } else if(track == numtracks){
        row = $('<tr/>');
        temp.append(row);
        cell = $('<td width=\"100\">');
        row.append(cell);
        cell.append('Right Channel');
     } //else if ((track == 7) or (track == 14) or (track == 21) or (track == 28) or (track == 35)){

     //}

        cell = $('<td width=\"70\"/>');
        row.append(cell);
        var bar = $('<div style=\"width:18px; white-space:nowrap; float:left\"><bar />');
        cell.append(bar);
       var inp = $('<input name="' + l + '" id="' + l + '" type="checkbox" checked="checked">');
        cell.append(inp);
        var bits = $('<label>', {
                text: l,
                'for': l
                });
        cell.append(bits); 

    choiceContainer.append(temp);

我尝试将自定义图例发送到不存在的 div，并将其发送到任意小的 div，但都没有成功。如果我将图例设置为“假”，那么所有样本都会消失，包括我在自定义图例中使用的样本。下面是我目前渲染的图像：

example http://skylinedrifter.homeip.net/2.0/tmp5.jpg

再次感谢专家社区的帮助！

Answer 1

你有两个选择。

一个，在您完成构建图例后隐藏 flot 生成的图例。一个简单的：

$('.legend').hide();

应该是你所需要的。

两个，既然您已经完成了 90% 的工作，那么您就完全不需要 flot 图例了。颜色“瓷砖”没有什么特别之处，只是div 中的div 中的td。

<td>
   <div style="border:1px solid #ccc;padding:1px">
       <div style="width:4px;height:0;border:5px solid rgb(175,216,248);overflow:hidden">
       </div>
   </div>
</td>

只需将rgb(175,216,248) 替换为系列的颜色即可。如果您让 flot 自动分配颜色，您可以从绘图对象的系列中获取它们：

var colorArray = $.map(myPlot.getData(), function(s){return s.color});