0

我为 Highcharts 使用 JSF2+Primefcaes+GSON，我的 JSF 页面是

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
    <ui:composition>
    <h:head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
        <script src="http://code.highcharts.com/stock/highstock.js"></script>
        <script src="http://code.highcharts.com/highcharts.js"></script>
        <script src="http://code.highcharts.com/modules/exporting.js"></script>
        <script type="text/javascript">
            function renderChart(divId, chartType, chartTitle, chartData, categories){
                var options = createOption(divId, chartType, chartTitle, categories);
                options.series = $.parseJSON(chartData);
                //chart.xAxis[0].setCategories($.parseJSON(categories));
                var chart = new Highcharts.Chart(options);
            }

            function createOption(divId, chartType, chartTitle, categories){
                var options = {
                    colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
                    chart: {
                        backgroundColor: {
                            linearGradient: [0, 0, 500, 500],
                            stops: [
                                [0, 'rgb(255, 255, 255)'],
                                [1, 'rgb(240, 240, 255)']
                            ]
                        },
                        borderWidth: 2,
                        plotBackgroundColor: 'rgba(255, 255, 255, .9)',
                        plotShadow: true,
                        plotBorderWidth: 1,
                        renderTo: divId,
                        type: chartType
                    },
                    title: {
                        text: 'JVM Heap Memory Usage Chart',
                        style: {
                            color: '#000',
                            font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
                        }
                    },
                    subtitle: {
                        text: 'Source: http://www.askkuber.com',
                        style: {
                            color: '#666666',
                            font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
                        }
                    },
                    xAxis: {
                        ridLineWidth: 1,
                        lineColor: '#000',
                        tickColor: '#000',
                        categories: $.parseJSON(categories),
                        labels: {
                            style: {
                                color: '#000',
                                font: '11px Trebuchet MS, Verdana, sans-serif'
                            },
                            formatter: function() {
                                return this.value;
                            }
                        },
                        title: {
                            style: {
                                color: '#333',
                                fontWeight: 'bold',
                                fontSize: '12px',
                                fontFamily: 'Trebuchet MS, Verdana, sans-serif'

                            }
                        }
                    },
                    yAxis: {
                        minorTickInterval: 'auto',
                        lineColor: '#000',
                        lineWidth: 1,
                        tickWidth: 1,
                        tickColor: '#000',
                        title: {
                            style: {
                                color: '#333',
                                fontWeight: 'bold',
                                fontSize: '12px',
                                fontFamily: 'Trebuchet MS, Verdana, sans-serif'
                            },
                            text: 'Heap Memory Usage'
                        },
                        labels: {
                            formatter: function() {
                                return this.value +'MB';
                            },
                            style: {
                                color: '#000',
                                font: '11px Trebuchet MS, Verdana, sans-serif'
                            }
                        }
                    },
                    plotOptions: {
                        area: {
                            stacking: 'normal',
                            lineColor: '#666666',
                            lineWidth: 1,
                            marker: {
                                lineWidth: 1,
                                lineColor: '#666666'
                            }
                        }
                    },
                    tooltip: {
                        formatter: function() {
                            return ''+ this.x +': '+ Highcharts.numberFormat(this.y, 0, ',') +' MB';
                        }
                    },
                    legend: {
                        itemStyle: {
                            font: '9pt Trebuchet MS, Verdana, sans-serif',
                            color: 'black'

                        },
                        itemHoverStyle: {
                            color: '#039'
                        },
                        itemHiddenStyle: {
                            color: 'gray'
                        }
                    },
                    labels: {
                        style: {
                            color: '#99b'
                        }
                    },
                    series: []
                };

                return options; 
            };
        </script>
   </h:head>

    <h:body>
        <h:form prependId="false">

            <p:poll interval="5000" oncomplete="renderChart('container','area','Sample Chart', '${chartController.chartData}', '${chartController.categories}');" 
                      action="#{chartController.loadChartData}" id="chartvalue_btn" />

            <div id="container" style="width: 100%; height: 500px"></div>  
        </h:form>
    </h:body>
    </ui:composition>
</html>

但是当我试图运行这个页面时，我得到了白色的空白页。谁能告诉我页面中哪里有问题。

4

1 回答 1

0

Primefaces 和 highcharts 可能使用不同版本的 JQuery。所以你应该评论这一行

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

关于 Jquery，一旦 Primefaces 有一个内置的 Jquery 库。

此外，您还可以通过浏览器控制台查看导致空白页面的错误 - Chrome 和 Firefox 上的 F12 - 并查找显示空白页面的错误性质。

于 2013-11-05T14:41:51.517 回答