0

尝试在 JavaScript 中正确编写一个函数，该函数根据下拉列表中的选定选项将连接的 url 输出到图表库输出（用于图表重新渲染）...。

问题：我没有让图表使用连接的 url 重新呈现（每次在下拉列表中选择一个选项时都应该发送）。

头部的 JavaScript 代码：

函数 httpGet(theUrl) { var xmlHttp = null;

        xmlHttp = new XMLHttpRequest();         // instantiate request
        xmlHttp.open( "GET", theUrl, false );   // open url
        xmlHttp.send( null );                   // sending nothing
        return xmlHttp.responseText;            // return url's data as text
        };
    function selectFabric(){
            var urlString = "http://localhost:8083/tbl/sparqlmotion?id=LiabilityChart&arg1=";
            var fabrics = document.getElementById('fabrics');
            var selectedFabric = fabrics.options[fabrics.selectedIndex];
            var linkAddTogether = [urlString + selectedFabric.value];
            var linkResult = linkAddTogether[0];
            var result = httpGet(linkResult);
            if (selectedFabric.value != "nothing"){
                return linkResult;      // update begins        // document.write(linkAddTogether)
            };
        };

    function revive (key, value) {
        if (value.datatype == "http://www.w3.org/2001/XMLSchema#double" ||  // if datatype is this
        value.datatype == "http://www.w3.org/2001/XMLSchema#integer" ||     // or, this
        value.datatype == "http://www.w3.org/2001/XMLSchema#float")         // or, this
        {
            return (parseInt(value.value))      // if '#double', '#integer', or '#schema', then: 'vars' label + convert the datatype's float value to integer 
        }
        else if (value.type == 'literal')
        {
            return (value.value)        // if datatype's value is a literal: 'vars' label + return as a string
        }
        else if (value.datatype == 'http://www.w3.org/2001/XMLSchema#date') 
        {
            return value.value      // if "XMLSchema#date's" value is a literal: 'vars' label + return as a string
        }
        else 
        {
            return value        // if datatype is anything else: 'vars' label + return value as a string
        }
    };

    var scriptHead = ["YUI().use('charts',function(Y){var myDataValues=\n\n["];
    var scriptTail = ["\n];\n\nvar styleDef={series:{Stock:{line:{color:'#EEB647'},marker:{fill:{color:'#eee',alpha:0,wmode:'transparent'},border:{color:'#222',alpha:0,wmode:'transparent'},over:{fill:{color:'#eee'},border:{color:'#000'},width:9,height:9}}},Liability:{line:{color:'#171944'},marker:{fill:{color:'#eee',alpha:0,wmode:'transparent'},border:{color:'#222',alpha:0,wmode:'transparent'},over:{fill:{color:'#eee'},border:{color:'#000'},width:9,height:9}}},Shipment:{line:{color:'#ff0000',alpha:0,wmode:'transparent'},marker:{fill:{color:'#eee',alpha:0,wmode:'transparent'},border:{color:'#ff0000',alpha:0,wmode:'transparent'},over:{fill:{color:'#ff0000',alpha:0,wmode:'transparent'},border:{color:'#000',alpha:0,wmode:'transparent'},width:16,height:16}}},Production:{line:{color:'#FFD700',alpha:0,wmode:'transparent'},marker:{fill:{color:'#eee',alpha:0,wmode:'transparent'},border:{color:'#FFD700',alpha:0,wmode:'transparent'},over:{fill:{color:'#FFD700',alpha:0,wmode:'transparent'},border:{color:'#000',alpha:0,wmode:'transparent'},width:16,height:16}}},Order:{line:{color:'#006400',alpha:0,wmode:'transparent'},marker:{fill:{color:'#eee',alpha:0,wmode:'transparent'},border:{color:'#006400',alpha:0,wmode:'transparent'},over:{fill:{color:'#006400',alpha:0,wmode:'transparent'},border:{color:'#000',alpha:0,wmode:'transparent'},width:16,height:16}}}}};var myAxes={dateRange:{keys:['date'],position:'bottom',type:'category',title:'Date Range',styles:{majorTicks:{display:'none'},label:{rotation:-45,margin:{top:5}},title:{fontSize:'90%'}}}};var mychart=new Y.Chart({dataProvider:myDataValues,interactionType:'planar',render:'#mychart',categoryKey:'Date',styles:styleDef,categoryType:'time',horizontalGridlines:{styles:{line:{color:'#fff'}}},verticalGridlines:{styles:{line:{color:'#fff'}}}})});\n\n"];
    var simpleHead = [scriptHead];
    var simpleTail = [scriptTail];
    var oldData = JSON.parse(result, revive);

表单的 HTML 代码（在正文中）：

form style="width:200px; color:#333; padding-right:5px; padding-bottom:2px; padding-left:55px; margin-top:0px; clear:none;" name="properties" id="properties"> select style="width:160px; color:#333; clear:none; display:block;" name="fabrics" id="fabrics" onChange="selectFabric()">

                    option value="nothing">Select Fabric END option

            option value="KOD23-4074-LV">KOD23-4074-LV END option

            option value="SGOD2-2858-LV">SGOD2-2858-LV END option

            option value="W-897-LV">W-897-LV END option

                    option value="FF-4084-LV">FF-4084-LV END option

                 END select
           END form

图表 JavaScript 代码（在 body 中编写脚本渲染 YUI 图表插件）：

document.write('\x3Cscript type="text/javascript" id="source">');

document.write(simpleHead[0] + '\n{Date: "' + oldData.results.bindings[0].date + '", Liability: ' + oldData.results.bindings[0].liability + ", Stock: " + oldData.results.bindings[0].stock + ", " + oldData.results.bindings[0].event + ": " + oldData.results.bindings[0].current + "}," + "\n\n");

document.write('\n{Date: "' + oldData.results.bindings[1].date + '", Liability: ' + oldData.results.bindings[1].liability + ", Stock: " + oldData.results.bindings[1].stock + ", " + oldData.results.bindings[1].event + ": " + oldData.results.bindings[1].current + "}," + "\n\n");

document.write('\n{Date: "' + oldData.results.bindings[2].date + '", Liability: ' + oldData.results.bindings[2].liability + ", Stock: " + oldData.results.bindings[2].stock + ", " + oldData.results.bindings[2].event + ": " + oldData.results.bindings[2].current + "}," + "\n\n");

document.write('\n{Date: "' + oldData.results.bindings[3].date + '", Liability: ' + oldData.results.bindings[3].liability + ", Stock: " + oldData.results.bindings[3].stock + ", " + oldData.results.bindings[3].event + ": " + oldData.results.bindings[3].current + "}," + "\n\n");

document.write('\n{Date: "' + oldData.results.bindings[4].date + '", Liability: ' + oldData.results.bindings[4].liability + ", Stock: " + oldData.results.bindings[4].stock + ", " + oldData.results.bindings[4].event + ": " + oldData.results.bindings[4].current + "}," + "\n\n");

document.write('\n{Date: "' + oldData.results.bindings[5].date + '", Liability: ' + oldData.results.bindings[5].liability + ", Stock: " + oldData.results.bindings[5].stock + ", " + oldData.results.bindings[5].event + ": " + oldData.results.bindings[5].current + "}," + "\n\n");

document.write('\n{Date: "' + oldData.results.bindings[6].date + '", Liability: ' + oldData.results.bindings[6].liability + ", Stock: " + oldData.results.bindings[6].stock + ", " + oldData.results.bindings[6].event + ": " + oldData.results.bindings[6].current + "}" + simpleTail[0] + "\n\n");

document.write('\x3C/script>');
4

0 回答 0