javascript - flot legend，如何隐藏并使用彩色瓷砖

Question

我的流程图有自定义图例，我添加了复选框以允许用户打开和关闭该系列。默认图例必须设置为 true 才能使我的图例具有颜色样本。我感兴趣是否有一种方法可以摆脱默认图例，同时保留自定义图例的颜色样本？下面是一些片段来展示我正在做的事情:

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，但都没有成功。如果我将图例设置为“false”，那么所有样本都会消失，包括我在自定义图例中使用的样本。下面是我当前渲染的图像:

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

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

Answer 1

您有两个选择。

一个，在完成构建图例后隐藏flot生成的图例即可。一个简单的:

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

应该是您所需要的。

二，由于您已经完成了 90%，因此只需完全删除对船队图例的需求即可。颜色“tiles”没有什么特别的，只是 td 中的 div 中的 div。

<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});