我正在使用 FLOT 创建图表。因为我已经升级到 FLOT javascript 库的 0.8.1 版本,这允许图表轴与画布一起保存。我遇到的唯一问题是图表图例没有保存到图表中。
我需要做什么才能将图例放到我的画布上?
这是HTML:
<div class="widget" id="flot_widget" data-collapsed="false" data-collapsible="true" data-icon="buildings" >
<h3 class="handle">Market Data for: <input type="text"
placeholder="Municipality"
id="flotAverageSalePricesCity"
style="float:inherit; font-size: 15px; width:90px;"
required
data-regex="^[a-zA-Z. ]+$" />
<span id="c3"></span>
</h3>
<div class="demo-container" id="demo-container" style="display:none; ">
<div id="placeholder" class="demo-placeholder" ></div>
</div>
</div>
这是javascript:
$("#flotAverageSalePricesCity").result(function(event, data, formatted) {
if (data){
$.ajax({
url: sURL + "utility/ajaxmuniChart1c",
type: "POST",
data: {muni: data[0]},
dataType: 'json',
success: function(json){
if (data) {
myWidth = (document.getElementById('flot_widget').offsetWidth-15)+"px";
myHeight = (document.getElementById('flot_widget').offsetWidth*.66)+"px";
document.getElementById('demo-container').style.display = 'block';
document.getElementById('placeholder').style.width = myWidth;
document.getElementById('placeholder').style.height = myHeight;
var options = {
canvas: true,
series: {
lines: { show: true, fill: false, fillColor: "rgba(255, 255, 255, 0.8)" },
points: { show: true, fill: true }
}
};
if (document.getElementById('c3').childElementCount > 0){
document.getElementById('c3').innerHTML = "";
};
var plotArea = $.plot("#placeholder", [json], options);
var ctx = plotArea.getCanvas();
loc = sURL + 'php/saveme.php';
var cs = new CanvasSaver(loc);
var btnDownload = cs.generateButton('Download', ctx, 'PTS_Chart');
c3.appendChild(btnDownload);
}
}
})
}
})
谢谢您的帮助。