Question

我正在使用Highcharts 4.2.5在Primefaces 6.0应用程序中显示图形，该应用程序在（JSF 2.0，Java 7，Weblogic 11g）上运行。

我有一个要求，我需要在一个页面上显示多个动态图表。图表未在页面上进行硬编码。实际上，它们需要根据用户权限动态呈现。一个用户可以看到1个图表，而其他用户可以在同一页面上看到多个图表。

我的问题是，由于jsonp数据上的一些解析器错误，我想单独调用每个图形的jsonpCallback函数，不会被成功调用。

奇怪的是，有时会调用某些图形，但在后续页面刷新之后，它会产生解析器错误。下面是我的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

错误=错误：未调用prepareMLChartOptions

Answer 1

我解决了，它通过调整我的generateMLChart（）函数并使用$ .getJSON而不是$ .ajax，而在$ .getJSON中，回调函数是动态的，而不是静态函数。

> system("echo \"paste <(echo 'Hi')\" | bash")
Hi

Primefaces单页上有多个Highcharts，给出了javascript错误

1 个答案: