0

我正在使用 jQuery FLOT 插件来绘制一些数据。我用来保存图像的工具是canvas2image。这个小型库可让您将 HTML5 画布元素保存为图像文件。此代码在我的页面上运行，我能够保存画布元素。

我遇到的问题是轴标签不是画布的一部分，因此没有被保存为图像的一部分。然后我了解到 FLOT 0.8 支持使用画布插件将轴标签绘制到画布上。由于我一直在使用 FLOT 0.7，我将库更新到新版本 0.8，现在我收到错误： TypeError: options.grid.borderWidth is null.

当我切换回 FLOT 的 0.7 版时，错误消息消失了，但在 0.8 版中我得到了错误。我知道包含浮点图的 div 需要指定宽度和高度，这就是我使用它的原因： <div id="flot" style="height:10px; width:10px;"></div>：

除了在 HTML 中指定绘图区域的宽度和高度之外，我还在我的 AJAX 方法的成功回调上再次指定了它。这是代码：

$("#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-45)+"px";
            myHeight = (document.getElementById('flot_widget').offsetWidth*.66)+"px";
            document.getElementById('flot').style.width = myWidth;
            document.getElementById('flot').style.height = myHeight;                    
            var options = {
                series: {
                    lines: { show: true, fill: false, fillColor: "rgba(255, 255, 255, 0.8)" },
                    points: { show: true, fill: true }
                }
            }; 
            var xxx = $.plot("#flot", [json], options);         
            var ctx = xxx.getCanvas();              
            cb = $('#flot').find('canvas.base');       
            canvas = cb.get(0);
            loc = sURL + 'php/saveme.php';
            var cs = new CanvasSaver(loc);                  
            var btnSave = cs.generateButton('Save', canvas, 'PTS_Chart');                   
            c3.appendChild(btnSave);
            var btnSave2 = cs.generateButton('Save2', ctx, 'PTS_Chart2');                   
            c3.appendChild(btnSave2);
        }
    }
})
}
})

有人可以解释为什么我可能会收到此错误吗？谢谢。

浮动错误

4

0 回答 0