flot legend swatch用法

时间:2013-10-11 00:59:23

标签: javascript jquery flot legend

您好,并提前感谢您的帮助,指导和鼓励。我是一个破解程序员......主要是自学和半成功。

所以这是挑战。我有一个flot plot,它有一个定制的图例,带有颜色样本,持久样本(它们不会关闭),数据集切换和一切。但只有在我可以看到默认图例时才会显示样本。也就是说,我将图例设置为“show:false”,样本也不会显示在我的自定义图例中。

有没有办法关闭/隐藏默认图例但仍然可以访问自定义图例可用的颜色托盘/样本?

以下是代码块...它还有其他一些事情,其中​​一些我为了清晰起见而删除了......

  var options = {
      yaxis: { min: 0 },
      xaxis: { tickDecimals: 0 },
      xaxes: [{
            axisLabel: 'Frequency (Hz)',
        }],
        yaxes: [{
        position: 'left',
        axisLabel: 'Power (dB)',
        }],
        series: {
                lines: {
                    lineWidth: 2,
                    show: true
                },
                points: {
                    show: false
                }
        },
        legend: {
            container: $("#labeler<?php echo $i ?>"),
            show: true,
            labelFormatter: function(label, series) {

         }
    },
    grid:{
        hoverable: true
       }

     };    

     var track = 0;
    // hard-code color indices to prevent them from shifting as
    // datasets are turned on/off
    var i = 0;
    $.each(datasets, function(key, val) {
        val.color = i;
        ++i;
    });

    // insert checkboxes 
    var choiceContainer = $("#choices<?php echo $i ?>");
     choiceContainer.append('<table><tr>');
    $.each(datasets, function(key, val) {
            track = track + 1;
            if (track == 1){
                choiceContainer.append('<td width=\"100\">Left Channel</td>');
            } else if(track == <?php echo $tracks ?>){
                choiceContainer.append('</tr><tr>');
                choiceContainer.append('<td>Right Channel</td>');
            }
            choiceContainer.append('<td width=\"45\"><input type="checkbox" name="' + key +
                               '" checked="checked" id="id' + key + '">' +
                               '<div style=\"width:18px; white-space:nowrap; float:left\"><bar /></div><label for="id' + key + '">'
                                + val.label + '</label></td>');


    });
    choiceContainer.append('</tr></table>');
    choiceContainer.find("input").change(plotAccordingToChoices);

    function plotAccordingToChoices() {
        var data = [];

        choiceContainer.find("input:checked").each(function () {
            var key = $(this).attr("name");
            if (key && datasets[key])
                data.push(datasets[key]);
        });

         if (data.length > 0){
             $.plot($("#placeholder<?php echo $i ?>"), data, options);
         }
    }
    plotAccordingToChoices();

        $('.legendColorBox > div').each(function(i){
            $(this).clone().prependTo(choiceContainer.find("bar").eq(i));
        });

1 个答案:

答案 0 :(得分:1)

从您的代码中看起来您将“自定义”图例附加到由flot构建的图例的克隆中。如果禁用flot图例,则$('。legendColorBox&gt; div')选择器将找不到要克隆的内容。您可以在克隆之后破解它并隐藏原始的flot图例,或完全删除对flot图例的要求。

要隐藏原始图例,只需执行以下操作:

$('.legend').eq(0).css('display','none');

$.plot来电后。