是否可以通过jqPlot将图例写入单独的分区 [英] Is it possible to write legend to a separate division with jqPlot

问题描述

我想将图例写入单独的div，jqPlot是否可以实现

I want to write the legend to a separate div, is this possible with jqPlot

legend: { 
   show: true,
   placement: 'outside',
   fontSize: '11px',
   location: 'n'
}

推荐答案

以下是我们可以使用的两个函数:

Here our the two function which you can use:

function graphLegendCreation(cnt){
    var parentNode = _g("dmGraphLegend")//trying to get the div element with id dmGraphLegend
        , newLegendItemNode = Util.ce("span") //creating an span element
        , newLegendItemSelect = Util.cep("input", { //creating an input element
            "type":"checkbox",
            "name":"graphLegend",
            "checked":true,
            "value":cnt
        })
        , newLegendItemIconNode = Util.cep("canvas", {
            "id":"series_icon_"+cnt,
            "className":"series_icons"
        });
        newLegendItemIconNode.style.display = "inline-block";
        newLegendItemIconNode.style.position = "relative";
        if(parentNode) {
            newLegendItemNode.innerHTML = graphPlot.series[cnt].label; 
            newLegendItemSelect = Util.ac(newLegendItemSelect,parentNode);
            newLegendItemSelect.checked = true;

            Util.addEvent(newLegendItemSelect,"click", function(e) {
                graphPlot.series[this.value].show = newLegendItemSelect.checked;
                graphPlot.redraw(false);
            })
            newLegendItemIconNode = Util.ac(newLegendItemIconNode,parentNode);
            newLegendItemNode = Util.ac(newLegendItemNode,parentNode);
            Util.ac(Util.ce("br"),parentNode);
        }
}


function showlegend() {
    var cntr = 0
    ,len = 0
    ,iconNodes
    ,legendItemIconNode
    ,seriesSequence = 0
    ,context
    ,bMarker;

        iconNodes = Util.Style.g("series_icons");
        len = iconNodes.length;
        for(cntr = 0; cntr < len; cntr++) {
            legendItemIconNode = iconNodes[cntr];
            if ($.browser.msie) {
                G_vmlCanvasManager.initElement(legendItemIconNode);
            }
            context = legendItemIconNode.getContext('2d');
            bMarker = new nMarkerRenderer({
                size:8,
                color:graphPlot.series[cntr].color,
                style:graphPlot.series[cntr].markerOptions.style
            });
            bMarker.draw(12,12,context, {});
        }

}

CSS: .series_icons {width:20px; height:20px;}

CSS: .series_icons{width:20px;height:20px;}

GraphLegendCreation函数，您每次在图例中创建一个条目时都必须调用该函数. ShowLegend只是要创建该图例图标.

GraphLegendCreation function you have to call that each time you create a entry inside legend. ShowLegend is just going to create that legend icons.

"nMarkrenderer"已经是一个已定义的函数.从 jsfiddle文件

The "nMarkrenderer" is already a defined function. Get that function from jsfiddle file

让我知道您需要更多帮助.它可以在IE上正常工作.久经考验的

Let me know you want more help with this. It works for sure on IE. tried and tested

这篇关于是否可以通过jqPlot将图例写入单独的分区的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！