0

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);                    
            }
        }
    })
}
})

助けてくれてありがとう。

4

1 に答える 1

2

現在、これはページ内では実行できません。WKHTML2PDFのようなページ全体のレンダラーを使用する必要があります。

凡例をキャンバスにレンダリングすることは、Flot 0.9 の主要なプロジェクトの 1 つです。

于 2013-10-28T00:07:38.773 に答える