我想将图例写入一个单独的 div,这可以使用 jqPlot
legend: {
show: true,
placement: 'outside',
fontSize: '11px',
location: 'n'
}
我想将图例写入一个单独的 div,这可以使用 jqPlot
legend: {
show: true,
placement: 'outside',
fontSize: '11px',
location: 'n'
}
这是您可以使用的两个功能:
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;}
每次在图例中创建条目时,您都必须调用 GraphLegendCreation 函数。ShowLegend 只是要创建那个图例图标。
“nMarkrenderer”已经是一个定义的函数。从jsfiddle 文件中获取该函数
让我知道您需要更多帮助。它肯定适用于 IE。久经考验