Question

我是JSF的新手，我想在我的jsf页面中添加一个高图固体标尺，但是我想要演示代码，当我运行它时，它会抛出我...

Error Parsing /index.xhtml: Error Traced[line: 185] El nombre de la entidad debe aparecer inmediatamente después de '&' en la referencia de entidades.
 javax.faces.view.facelets.FaceletException: Error Parsing /index.xhtml: Error Traced[line: 185] El nombre de la entidad debe aparecer inmediatamente después de '&' en la referencia de entidades.

这是索引的代码

<?xml version='1.0' encoding='UTF-8' ?>
<!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://xmlns.jcp.org/jsf/html">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <script src="https://code.highcharts.com/highcharts.js"></script>
        <script src="https://code.highcharts.com/highcharts-more.js"></script>

        <script src="https://code.highcharts.com/modules/solid-gauge.js"></script>

        <div style="width: 600px; height: 400px; margin: 0 auto">
            <div id="container-speed" style="width: 300px; height: 200px; float: left"></div>
            <div id="container-rpm" style="width: 300px; height: 200px; float: left"></div>
        </div>
        <script type="text/javascript">
            $(function () {

                var gaugeOptions = {

                    chart: {
                        type: 'solidgauge'
                    },

                    title: null,

                    pane: {
                        center: ['50%', '85%'],
                        size: '140%',
                        startAngle: -90,
                        endAngle: 90,
                        background: {
                            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
                            innerRadius: '60%',
                            outerRadius: '100%',
                            shape: 'arc'
                        }
                    },

                    tooltip: {
                        enabled: false
                    },

                    // the value axis
                    yAxis: {
                        stops: [
                            [0.1, '#55BF3B'], // green
                            [0.5, '#DDDF0D'], // yellow
                            [0.9, '#DF5353'] // red
                        ],
                        lineWidth: 0,
                        minorTickInterval: null,
                        tickAmount: 2,
                        title: {
                            y: -70
                        },
                        labels: {
                            y: 16
                        }
                    },

                    plotOptions: {
                        solidgauge: {
                            dataLabels: {
                                y: 5,
                                borderWidth: 0,
                                useHTML: true
                            }
                        }
                    }
                };

                // The speed gauge
                var chartSpeed = Highcharts.chart('container-speed', Highcharts.merge(gaugeOptions, {
                    yAxis: {
                        min: 0,
                        max: 200,
                        title: {
                            text: 'Speed'
                        }
                    },

                    credits: {
                        enabled: false
                    },

                    series: [{
                        name: 'Speed',
                        data: [80],
                        dataLabels: {
                            format: '<div style="text-align:center"><span style="font-size:25px;color:' +
                                ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
                                   '<span style="font-size:12px;color:silver">km/h</span></div>'
                        },
                        tooltip: {
                            valueSuffix: ' km/h'
                        }
                    }]

                }));

                // The RPM gauge
                var chartRpm = Highcharts.chart('container-rpm', Highcharts.merge(gaugeOptions, {
                    yAxis: {
                        min: 0,
                        max: 5,
                        title: {
                            text: 'RPM'
                        }
                    },

                    series: [{
                        name: 'RPM',
                        data: [1],
                        dataLabels: {
                            format: '<div style="text-align:center"><span style="font-size:25px;color:' +
                                ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span><br/>' +
                                   '<span style="font-size:12px;color:silver">* 1000 / min</span></div>'
                        },
                        tooltip: {
                            valueSuffix: ' revolutions/min'
                        }
                    }]

                }));

                // Bring life to the dials
                setInterval(function () {
                    // Speed
                    var point,
                        newVal,
                        inc;

                    if (chartSpeed) {
                        point = chartSpeed.series[0].points[0];
                        inc = Math.round((Math.random() - 0.5) * 100);
                        newVal = point.y + inc;

                        if (newVal < 0 || newVal > 200) {
                            newVal = point.y - inc;
                        }

                        point.update(newVal);
                    }

                    // RPM
                    if (chartRpm) {
                        point = chartRpm.series[0].points[0];
                        inc = Math.random() - 0.5;
                        newVal = point.y + inc;

                        if (newVal < 0 || newVal > 5) {
                            newVal = point.y - inc;
                        }

                        point.update(newVal);
                    }
                }, 2000);


            });
        </script>
    </h:body>
</html>

我不知道我做错了什么，希望有人可以帮助我

Answer 1

使用Facelets的JSF基于XML，因此ampersands（＆amp;）将被视为实体，而不是java中的和 conditional operator和大多数编程语言。所以如果你想在你的facelets中使用它，你必须改变所有＆amp; & 是＆符实体。

Answer 2

此问题是由于不使用CData引起的。你应该使用CDATA来实现这个

//<![CDATA[
   //javascript code
//]]>

什么意思是CDATA What does <![CDATA[]]> in XML mean?

如何在JSF中实现仪表实体图表

2 个答案: