为图表创建自定义图例并在生成后访问项目

Question

我使用 $.plot 创建了一个图表。我正在尝试为每个数据项使用图表的 'series.percent' 等选项值。这背后的原因是我想创建一个基于图形数据的自定义图例。（对于 labelBox 中的 exp:show 百分比）。有可能这样做吗？我试过使用 Plothover 事件然后为所有数据触发它。但我找不到任何代码来触发它。这是悬停的代码：

   $(this).bind("plothover", function (event, pos, item) {
                console.log(event + pos + item);
                if (!item) { return; }
                console.log(item.series.data)
                var html = [];
                var percent = parseFloat(item.series.percent).toFixed(2);

                str = item.series.label.replace(/\s/g, '');
                var legendSection = create('<div id=' + str + ' class="col-md-6 cls" style="margin-top: 5px;">' +
                  '<span class="col-md-4 cls" style="padding-left: 1px; padding-right: 1px; display: inline-block; height: 20px; color: white; background-color: ' + item.series.color + '">' + percent + '</span>' +
                  '<div class="col-md-8 cls">' + '<div class="row cls clsR">' +
                  '<span class="col-md-8 cls" style="background-color: white; color: black; font-size: 11px;">' + item.series.label + '</span>' +
                  '<span class="col-md-8 cls" style="background-color: white; color: black; font-size: 11px;">' + item.series.data + '</span>' +
                  '</div></div></div>');
                if ($("#container").find('#' + str + '').length == 0)
                    $("#container").append(legendSection);
            });

我的问题是： 1）我怎样才能访问图表的百分比和项目？ 2)我怎么知道是否还有其他事件可以绑定到图表？ 3) 或者有什么方法可以像我提到的 labelBox 那样自定义图例吗？

感谢您的帮助

Answer 1

好吧，我找到了一种使用以下函数创建标签的方法：

  function labelGenerate(label, series) {
    var percent = parseFloat(series.percent).toFixed(2);
    var str = label.replace(/\s/g, '');
    var legendSection = create('<div id=' + str + ' class="col-md-6 cls" style="margin-top: 5px;">' +
    '<span class="col-md-4 cls" style="padding-left: 1px; padding-right: 1px; display: inline-block; height: 20px; color: white; background-color: ' + series.color + '">' + percent + '%</span>' +
    '<div class="col-md-8 cls">' + '<div class="row cls clsR">' +
    '<span class="col-md-8 cls" style="background-color: white; color: black; font-size: 11px;">' + series.label + '</span>' +
    '<span class="col-md-8 cls" style="background-color: white; color: black; font-size: 11px;">' + series.data + '</span>' +
    '</div></div></div>');
    if ($("#container").find('#' + str + '').length == 0)
        $("#container").append(legendSection);

    return false;
}

函数 return False.the 图例，在选项部分，将是这样的：

legend: { show: false, 
          labelFormatter: function (label, series) { labelGenerate(label, series); }
        }

最后这是 createHTML 函数，我可以用它生成我想要的标签：

function create(htmlStr) {
            var frag = document.createDocumentFragment(),
                temp = document.createElement('div');
            temp.innerHTML = htmlStr;
            while (temp.firstChild) {
                frag.appendChild(temp.firstChild);
            }
            return frag;
        }

，而且有效。图例将在我想要图表部分之外的部分生成。

为图表创建自定义图例并在生成后访问项目

Create Customize legend for flot chart and get access to items after generation

jquery

charts

flot

legend

formatter