Primefaces單頁上的多個Highcharts，給出javascript錯誤

我使用Highcharts 4.2.5在運行於（JSF 2.0，Java 7，Weblogic 11g）的Primefaces 6.0應用程序中顯示圖形。Primefaces單頁上的多個Highcharts，給出javascript錯誤

我有一個需求，我需要在單個頁面上顯示多個動態圖形。這些圖表在頁面上沒有硬編碼。事實上，他們需要根據用戶權限隨時進行渲染。一個用戶可以看到1個圖表，而其他用戶可以在同一頁面看到多個圖表。

我的問題是，我想分別調用每個圖的jsonpCallback函數，由於jsonp數據上的一些分析器錯誤，不能成功調用。

奇怪的是，它有時會被調用一些圖形，但在後續頁面刷新後，它會給出一個解析器錯誤。以下是我的JSF xhtml代碼/ JS代碼/和瀏覽器控制檯日誌。下面用例是2米的曲線圖，但只有一個圖形正確呈現和其他給出解析器

XHTML代碼。

<ui:repeat var="c" value="#{cg.charts}" varStatus="status"> 
       <div class="Container25 Responsive NoIndent"> 
         <div class="EmptyBox20"></div> 

         <p:panel style="min-height: 300px;"> 
          <div class="Container" > 
           <!--<i class="icon-chart-bar Fs30 Fleft Wid25 red TexAlCenter" ></i>--> 
           <div id="chartContainer#{c.id}"></div> 
           <script type="text/javascript"> 
            generateMLChart('chartContainer#{c.id}'); 
           </script> 
          </div> 
         </p:panel> 

       </div> 
      </ui:repeat>

JavaScript代碼

function generateMLChart(divId){ 
console.log('generateMLChart called... '+divId); 
chartType="prepareMLChartOptions"; 

$.ajax({ 
     type: "GET", 
     url:"./multilinechartservlet/"+Math.random()+"?jsonp="+chartType, 
     dataType: 'jsonp', 
     jsonpCallback: chartType, // the function to call 
     success: function(json) { 
        console.log("divId = "+divId); 

        var len  = json.multilinedata.length; 
        //var divid = json.divid; 
        i = 0; 

        // setting options variable 
        var options = { 
         credits: { 
          enabled: false 
         }, 
         rangeSelector: { 
          allButtonsEnabled: true 
         }, 
         legend:{ 
          enabled: true 
         }, 
         title:{ 
          text : 'Key Policy Interest Rates' 
         }, 

         series: [] 
        } 

        // setting options.series variable with json data, it should be a loop coz, it can have multiple series. 
        for (i; i < len; i++) { 
         options.series.push(json.multilinedata[i]); 
        } 

        // finally populate the charts container 
        $('#'+divId).highcharts("StockChart",options); 

        console.log('success function - complete'); 
     }, 
     error: function(xhr, status, error) { 
        alert(error); 
        console.log("xhr.responseText ="+xhr.responseText); 
        console.log("status="+status); 
        console.log("error="+error); 
       } 
     }); 

} 

function prepareMLChartOptions(json,divId) { 

    if(divId == undefined) 
     return; 

}

Chrome的控制檯日誌

status=parsererror multilinechart.js:49

error=Error: prepareMLChartOptions was not called

來源

2016-07-24 ZEE

我認爲這個問題與Highcharts沒有關係，但是使用了JSON，你試圖獲得你的圖表。 –

爲什麼你不使用PrimeFaces圖表？ – JokerTheFourth

@JokerTheFourth我的組織，不喜歡primefaces jQuery圖表，因爲它們看起來不是很有吸引力，我們也不想花時間去設計它。 – ZEE

我解決了，它通過使用調整我的generateMLChart（）函數，並使用$ .getJSON代替$ .ajax和$ .getJSON中，回調函數是動態函數，而不是靜態函數。

function generateMLChart(divId, 
        chartName, 
        chartId, 
        qNo) { 
console.log('generateMLChart called... ' + divId+ ' - '+ chartName + ' - '+qNo); 

$.getJSON("./chartservlet?chartId=" + divId + "&queryNumber=" + qNo, function (data, textStatus, jqxhr) { 
    console.log("textStatus = " + textStatus);// Success 
    console.log("jqxhr.status =" + jqxhr.status);// 200 
    console.log("divId = " + divId); 


    var len = data.multilinedata.length; 
    i = 0; 

    // setting options variable 
    var options = { 
     credits : { 
      enabled : false 
     }, 
     rangeSelector : { 
      allButtonsEnabled : true 
     }, 
     legend : { 
      enabled : true 
     }, 
     title : { 
      text : chartName 
     }, 
     series : [] 
    } 

    // setting options.series variable with json data, it should be a loop coz, it can have multiple series. 
    for (i;i < len;i++) { 
     options.series.push(data.multilinedata[i]); 
    } 

    // finally populate the charts container 
    $('#' + divId).highcharts("StockChart", options); 

    console.log('-- success function - complete'); 

}).fail(function (jqxhr, settings, exception) { 
    console.error("exception =" + exception); 
    console.log("jqxhr =" + jqxhr); 
    console.log("settings =" + settings); 
    alert("Triggered ajaxError handler. Contact IT- Helpdesk"); 
}); 

    }

來源

2016-07-28 05:47:04 ZEE

Primefaces單頁上的多個Highcharts，給出javascript錯誤

回答

相關問題