个人中心
gpt4 book ai didi

javascript - js 编码新手 - 遇到变量和 for 循环的问题

转载 作者：行者123 更新时间：2023-11-30 05:35:08 27 4
gpt4 key购买 nike

我使用的是 Netbeans 8.0、Primefaces 4.0、Highcharts、Java 和 XHTML。

最终，我想要加载从数据库动态抓取的数据并加载到网络应用程序中，但首先，我需要弄清楚如何使用 for 循环生成图表。我试图修改的示例是 basic line chart Highcharts 上的示例。

我的代码是这样的:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.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">

    <f:view contentType="text/html">
        <h:head>
            <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
            <script src="http://code.highcharts.com/highcharts.js"></script>
            <script src="http://code.highcharts.com/modules/exporting.js"></script>

            <f:facet name="first">
                <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
                <title>PrimeFaces</title>
            </f:facet>
        </h:head>

        <h:body>

            <p:layout fullPage="true">

                <p:layoutUnit position="north" size="100" resizable="true" closable="true" collapsible="true">
                    Header
                </p:layoutUnit>

                <p:layoutUnit position="south" size="100" closable="true" collapsible="true">
                    Footer
                </p:layoutUnit>

                <p:layoutUnit position="west" size="175" header="Left" collapsible="true">
                    <p:menu>
                        <p:submenu label="Resources">
                            <p:menuitem value="Demo" url="http://www.primefaces.org/showcase-labs/ui/home.jsf" />
                            <p:menuitem value="Documentation" url="http://www.primefaces.org/documentation.html" />
                            <p:menuitem value="Forum" url="http://forum.primefaces.org/" />
                            <p:menuitem value="Themes" url="http://www.primefaces.org/themes.html" />

                        </p:submenu>

                    </p:menu>
                </p:layoutUnit>

                <p:layoutUnit position="center">

                    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

                </p:layoutUnit>

            </p:layout>

        </h:body>

    </f:view>

<script language="javascript" type="text/javascript">  
 // <![CDATA[
 function() {

        cityArray = #{tokyoBean.cityArr},
                tempsArray = #{tokyoBean.cityArrArr},
                monthsArray = #{tokyoBean.catArr},
                series = []
                ,
                len = cityArray.length;
                for (var i = 0; i &#60; len; i++)
        {
        series.push({
        name: [cityArray[i]],
                data: [tempsArray[i]]
        });
        }
        $('#container').highcharts({
        title: {
        text: 'Monthly Average Temperature',
                x: - 20 //center
        },
                subtitle: {
                text: 'Source: WorldClimate.com',
                        x: - 20
                },
                xAxis: {
                categories: monthsArray
                },
                yAxis: {
                title: {
                text: 'Temperature (°C)'
                },
                        plotLines: [{
                        value: 0,
                                width: 1,
                                color: '#808080'
                        }]
                },
                tooltip: {
                valueSuffix: '°C'
                },
                legend: {
                layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'middle',
                        borderWidth: 0
                },
                series: series
        }),
        };
// ]]>
    </script>
</html>

当我运行文件并查看页面源代码时，代码如下所示:

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
                <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
                <title>PrimeFaces</title><link type="text/css" rel="stylesheet" href="/Demo/faces/javax.faces.resource/theme.css?ln=primefaces-aristo" /><link type="text/css" rel="stylesheet" href="/Demo/faces/javax.faces.resource/primefaces.css?ln=primefaces&amp;v=4.0" /><link type="text/css" rel="stylesheet" href="/Demo/faces/javax.faces.resource/layout/layout.css?ln=primefaces&amp;v=4.0" /><script type="text/javascript" src="/Demo/faces/javax.faces.resource/jquery/jquery.js?ln=primefaces&amp;v=4.0"></script><script type="text/javascript" src="/Demo/faces/javax.faces.resource/jquery/jquery-plugins.js?ln=primefaces&amp;v=4.0"></script><script type="text/javascript" src="/Demo/faces/javax.faces.resource/primefaces.js?ln=primefaces&amp;v=4.0"></script><script type="text/javascript" src="/Demo/faces/javax.faces.resource/layout/layout.js?ln=primefaces&amp;v=4.0"></script>
            <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
            <script src="http://code.highcharts.com/highcharts.js"></script>
            <script src="http://code.highcharts.com/modules/exporting.js"></script></head><body><script id="j_idt6_s" type="text/javascript">$(function(){PrimeFaces.cw('Layout','widget_j_idt6',{id:'j_idt6',full:true,north:{paneSelector:'#j_idt7',size:'100',resizable:true,closable:true,spacing_open:6,spacing_closed:25},south:{paneSelector:'#j_idt9',size:'100',resizable:false,closable:true,spacing_open:6,spacing_closed:25},west:{paneSelector:'#j_idt11',size:'175',resizable:false,closable:true,spacing_open:6,spacing_closed:25},center:{paneSelector:'#j_idt18',size:'auto',resizable:false,closable:false}},'layout');});</script><div id="j_idt7" class="ui-layout-unit ui-widget ui-widget-content ui-corner-all ui-layout-north"><div class="ui-layout-unit-content ui-widget-content">
                    Header
                </div></div><div id="j_idt9" class="ui-layout-unit ui-widget ui-widget-content ui-corner-all ui-layout-south"><div class="ui-layout-unit-content ui-widget-content">
                    Footer
                </div></div><div id="j_idt11" class="ui-layout-unit ui-widget ui-widget-content ui-corner-all ui-layout-west"><div class="ui-layout-unit-header ui-widget-header ui-corner-all"><span class="ui-layout-unit-header-title">Left</span><a href="javascript:void(0)" class="ui-layout-unit-header-icon ui-state-default ui-corner-all" title="Collapse"><span class="ui-icon ui-icon-triangle-1-w"></span></a></div><div class="ui-layout-unit-content ui-widget-content"><div id="j_idt12" class="ui-menu ui-widget ui-widget-content ui-corner-all ui-helper-clearfix" role="menu"><div tabindex="0" class="ui-helper-hidden-accessible"></div><ul class="ui-menu-list ui-helper-reset"><li class="ui-widget-header ui-corner-all"><h3>Resources</h3></li><li class="ui-menuitem ui-widget ui-corner-all" role="menuitem"><a tabindex="-1" class="ui-menuitem-link ui-corner-all" href="http://www.primefaces.org/showcase-labs/ui/home.jsf"><span class="ui-menuitem-text">Demo</span></a></li><li class="ui-menuitem ui-widget ui-corner-all" role="menuitem"><a tabindex="-1" class="ui-menuitem-link ui-corner-all" href="http://www.primefaces.org/documentation.html"><span class="ui-menuitem-text">Documentation</span></a></li><li class="ui-menuitem ui-widget ui-corner-all" role="menuitem"><a tabindex="-1" class="ui-menuitem-link ui-corner-all" href="http://forum.primefaces.org/"><span class="ui-menuitem-text">Forum</span></a></li><li class="ui-menuitem ui-widget ui-corner-all" role="menuitem"><a tabindex="-1" class="ui-menuitem-link ui-corner-all" href="http://www.primefaces.org/themes.html"><span class="ui-menuitem-text">Themes</span></a></li></ul></div><script id="j_idt12_s" type="text/javascript">$(function(){PrimeFaces.cw('PlainMenu','widget_j_idt12',{id:'j_idt12'});});</script></div></div><div id="j_idt18" class="ui-layout-unit ui-widget ui-widget-content ui-corner-all ui-layout-center"><div class="ui-layout-unit-content ui-widget-content">

                    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div></div></div><ul id="javax_faces_developmentstage_messages" title="Project Stage[Development]: Unhandled Messages"><li style="Color: orange"><span>        The form component needs to have a UIForm in its ancestry. Suggestion: enclose the necessary components within &lt;h:form&gt; </span></li><li style="Color: orange"><span>      The form component needs to have a UIForm in its ancestry. Suggestion: enclose the necessary components within &lt;h:form&gt; </span></li></ul></body>

<script language="javascript" type="text/javascript">  
 // <![CDATA[
 function() {

        cityArray = ['Tokyo', 'New York', 'Berlin', 'London'],
                tempsArray = [[7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6], [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5], [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0], [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 6.6]],
                monthsArray = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
                series = []
                ,
                len = cityArray.length;
                for (var i = 0; i &#60; len; i++)
        {
        series.push({
        name: [cityArray[i]],
                data: [tempsArray[i]]
        });
        }
        $('#container').highcharts({
        title: {
        text: 'Monthly Average Temperature',
                x: - 20 //center
        },
                subtitle: {
                text: 'Source: WorldClimate.com',
                        x: - 20
                },
                xAxis: {
                categories: monthsArray
                },
                yAxis: {
                title: {
                text: 'Temperature (°C)'
                },
                        plotLines: [{
                        value: 0,
                                width: 1,
                                color: '#808080'
                        }]
                },
                tooltip: {
                valueSuffix: '°C'
                },
                legend: {
                layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'middle',
                        borderWidth: 0
                },
                series: series
        }),
        };
// ]]>
    </script>
</html>

而且我无法发布我的页面的 ss，但它几乎完全空白，除了在底部它说:

"表单组件需要在其祖先中有一个 UIForm。建议:将必要的组件包含在其中 表单组件需要在其祖先中有一个 UIForm。建议:将必要的组件包含在“

用黄色的大字体。

请解释我做错了什么。我有这个页面的另一个版本，它不使用 for 循环，而是从每个城市的支持 bean 调用数据数组——那个版本工作正常，但我无法在最终实现中这样做，因为所有数据都将必须动态拉动。

提前致谢。

更新:

我整个下午都在研究这个，并取得了一些真正的进展，但我还没有完成。 Netbeans 编辑器不允许按照我尝试使用它的方式格式化 series.push() 方法，而且，我必须在单独的代码行上声明和定义变量以使它们保持不变，可以这么说。我删除了我的 jquery 脚本源(去掉了黄色警告消息)，我的代码现在看起来像这样:

    //html code redacted as it is working

    <script>
        $(function() {

            cityArray = new Array();
            cityArray = #{tokyoBean.cityArr};
            monthsArray = new Array();
            monthsArray = #{tokyoBean.catArr};
            tempsArray = new Array();
            tempsArray = #{tokyoBean.cityArrArr};
            len = cityArray.length;
            series = new Array();

for(i=0; i &#60; len; i++) {
    series.push("{ <br /> name: "+[cityArray[i]]+", <br /> data: "+[tempsArray[i]]+" <br /> } ");
}



            $('#container').highcharts({
                title: {
                    text: 'Monthly Average Temperature',
                    x: -20 //center
                },
                subtitle: {
                    text: 'Source: WorldClimate.com',
                    x: -20
                },
                xAxis: {
                    categories: monthsArray
                },
                yAxis: {
                    title: {
                        text: 'Temperature (°C)'
                    },
                    plotLines: [{
                            value: 0,
                            width: 1,
                            color: '#808080'
                        }]
                },
                tooltip: {
                    valueSuffix: '°C'
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle',
                    borderWidth: 0
                },
                series: series
            });
        });
    </script>

现在运行此文件会呈现标题、副标题、图例、水平轴和垂直轴，但仍不会呈现情节本身。有什么线索吗？

最佳答案

首先，让我对所有提出建议的人表示感谢。我玩代码，终于让它工作了。以防万一有人再次遇到这个问题，这是我最终的 xhtml 和 js 代码的样子。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.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">

    <f:view contentType="text/html">
        <h:head>
            <script src="http://code.highcharts.com/highcharts.js"></script>
            <script src="http://code.highcharts.com/modules/exporting.js"></script> 
            <f:facet name="first">
                <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
                <title>PrimeFaces</title>
            </f:facet>
        </h:head>

        <h:body>

            <p:layout fullPage="true">

                <p:layoutUnit position="north" size="100" resizable="true" closable="true" collapsible="true">
                    Header
                </p:layoutUnit>

                <p:layoutUnit position="south" size="100" closable="true" collapsible="true">
                    Footer
                </p:layoutUnit>

                <p:layoutUnit position="west" size="175" header="Left" collapsible="true">
                    <p:menu>
                        <p:submenu label="Resources">
                            <p:menuitem value="Demo" url="http://www.primefaces.org/showcase-labs/ui/home.jsf" />
                            <p:menuitem value="Documentation" url="http://www.primefaces.org/documentation.html" />
                            <p:menuitem value="Forum" url="http://forum.primefaces.org/" />
                            <p:menuitem value="Themes" url="http://www.primefaces.org/themes.html" />

                        </p:submenu>

                    </p:menu>
                </p:layoutUnit>

                <p:layoutUnit position="center">

                    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

                </p:layoutUnit>

            </p:layout>

        </h:body>

    </f:view>

    <script>
        $(function() {

            cityArray = new Array();
            cityArray = #{tokyoBean.cityArr};
            monthsArray = new Array();
            monthsArray = #{tokyoBean.catArr};
            tempsArray = new Array();
            tempsArray = #{tokyoBean.cityArrArr};
            len = cityArray.length;
            series = new Array();

            for(i=0; i &#60; len; i++) {
                var arrayElement = tempsArray[i],
                        cityElement = cityArray[i];
                series.push({
                    name: cityElement,
                    data: arrayElement
                });
            }




            $('#container').highcharts({
                title: {
                    text: 'Monthly Average Temperature',
                    x: -20 //center
                },
                subtitle: {
                    text: 'Source: WorldClimate.com',
                    x: -20
                },
                xAxis: {
                    categories: monthsArray
                },
                yAxis: {
                    title: {
                        text: 'Temperature (°C)'
                    },
                    plotLines: [{
                            value: 0,
                            width: 1,
                            color: '#808080'
                        }]
                },
                tooltip: {
                    valueSuffix: '°C'
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle',
                    borderWidth: 0
                },
                series: series
            });
        });
    </script>
</html>

关于javascript - js 编码新手 - 遇到变量和 for 循环的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24334655/

27 4 0
文章推荐： java - 我在 [row,col] :[1, 2] 处收到 XMLStreamException
文章推荐： javascript - 使用 mouseup 事件和调用函数的 dbclick 事件选择文本
文章推荐： Java Spring Boot - 未经授权， postman
文章推荐： javascript - AngularJS 指令只调用一次？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com