javascript — переменная окна, определенная в оконной функции, не видимая снаружи

переменная окна, определенная в оконной функции, не видимой снаружи

Я определил как окно новый экземпляр объекта CanvasJS внутри оконной функции и назвал его диаграммой. Этот объект не виден в функции, управляющей движением ползунка. Задача состояла в том, чтобы перемещать горизонтальную линию на графике согласованно с движением ползунка. Вот код

  1. ajax перехватывает обратную передачу и a. заполнить контейнер полученным HTML-кодом и сценариями b. Обед функции для создания нового графика

     $("#desktop_new_alarm_research").submit(function(e) { e.preventDefault(); // avoid to execute the actual submit of the form. var form = $(this); var url = ajax_url 'Login/getResearchResultsForNewPriceAlarms'; $.ajax({ type: "POST", url: url, data: form.serialize(), // serializes the form's elements. success: function(data) { var response = JSON.parse(data); $('#research_results_container').html(response.rendered_page); if(response.state == 'success'){ if(response.galenic_made == false){ renderPriceGraphs(response.chart_name, response.min_price_usd, response.max_price_usd,response.factory_made,response.galenic_made,response.factory_made_max_min_graph_prices,response.factory_made_avg_graph_prices_stats); } if(response.galenic_made == true){ renderPriceGraphs(response.chart_name, response.min_price_usd,response.max_price_usd,response.factory_made,response.galenic_made,response.factory_made_max_min_graph_prices,response.factory_made_avg_graph_prices_stats,response.galenic_made_max_min_graph_prices,response.galenic_made_avg_graph_prices_stats); } } } }); }); 
  2. в response.rendered_page есть также этот сценарий, который должен: изменить текстовое поле со значением ползунка (это работает) б. изменить порог горизонтальной линии (не работает)

     {amp}lt;script{amp}gt; // range slider code var slider = document.getElementById("myRange"); var output = document.getElementById("demo"); output.innerHTML = parseFloat(slider.value).toPrecision(2);//.toPrecision(- Math.floor(Math.log10(slider.value)) 2); slider.oninput = function() { var min_slider_value = parseFloat(this.value); output.innerHTML = min_slider_value.toPrecision(2); chart.axisY[0].stripLines[0].set("value",min_slider_value); //console.log("TEST " response.state); }; var slider1 = document.getElementById("myRange1"); var output1 = document.getElementById("demo1"); output1.innerHTML = parseFloat(slider1.value).toPrecision(2);//.toPrecision( - Math.floor(Math.log10(slider.value)) 2); slider1.oninput = function() { var max_slider_value = parseFloat(this.value); output1.innerHTML = max_slider_value.toPrecision(2); }; 
  3. в файле commonFunctions.js, загруженном на страницу перед обратной передачей, есть функция для создания графа, в котором график относительной переменной был определен как window.chart = new …

      window.renderPriceGraphs = function(chart_name, min_price_usd, max_price_usd, factory_made, galenic_made, factory_made_max_min_graph_prices, factory_made_avg_graph_prices_stats, galenic_made_max_min_graph_prices = null, galenic_made_avg_graph_prices_stats = null) { var max_line = max_price_usd*1.05; var min_line = min_price_usd*0.90; //alert("values " max_price_usd " " min_price_usd); console.log("values ma and min" max_line " " min_line); if(factory_made == true {amp}amp;{amp}amp; galenic_made == true){ //var chart = new CanvasJS.Chart(chart_name, { window.chart = new CanvasJS.Chart(chart_name, { animationEnabled: true, zoomEnabled:true, theme: "light2", title:{ text: "Prices per unit of main active ingredients" }, // subtitles: [{ // text: "High and Low Prices - 2016" // }], axisX: { valueFormatString: "MMM", intervalType: "month", interval: 1 }, axisY: { title: "Price (in USD)", prefix: "$", interval: 0.010, includeZero: false, stripLines:[ { value: max_line, color:"#ff0000", label: "Max threshold", labelFontColor: "#ff0000", showOnTop: true }, { value: min_line, color:"#00bc00", label: "Min threshold", labelFontColor: "#00bc00", showOnTop: true } ] }, data: [ { type: "rangeSplineArea", showInLegend: true, legendText: "Factory made max/min Prices", xValueType: "dateTime", xValueFormatString: "DD MMM", yValueFormatString: "$#,##0.#######", toolTipContent: "Factory made - {x}{amp}lt;br{amp}gt;{amp}lt;b{amp}gt;Max:{amp}lt;/b{amp}gt; {y[1]}{amp}lt;br{amp}gt;{amp}lt;b{amp}gt;Min:{amp}lt;/b{amp}gt; {y[0]}", dataPoints: factory_made_max_min_graph_prices }, { type: "spline", showInLegend: true, legendText: "Average Factory Prices", legendMarkerColor: "#dee0ec", color: "#dee0ec", lineColor: "#dee0ec", markerSize: 5, xValueFormatString: "DD MMMM", yValueFormatString: "$#,##0.#####", xValueType: "dateTime", toolTipContent: "Factory made - {amp}lt;b{amp}gt;{x}{amp}lt;/b{amp}gt; {amp}lt;/br{amp}gt; Avg: {y}", dataPoints: factory_made_avg_graph_prices_stats }, { type: "rangeSplineArea", showInLegend: true, color: "#51bfc3", fillOpacity: .3, legendText: "Galenic made max/min Prices", xValueType: "dateTime", xValueFormatString: "DD MMM", yValueFormatString: "$#,##0.#######", toolTipContent: "Galenic made - {x}{amp}lt;br{amp}gt;{amp}lt;b{amp}gt;Max:{amp}lt;/b{amp}gt; {y[1]}{amp}lt;br{amp}gt;{amp}lt;b{amp}gt;Min:{amp}lt;/b{amp}gt; {y[0]}", dataPoints: galenic_made_max_min_graph_prices }, { type: "spline", showInLegend: true, legendText: "Average Galenic Prices", legendMarkerColor: "#a6e6e8", color: "#a6e6e8", lineColor: "#a6e6e8", markerSize: 5, xValueFormatString: "DD MMMM", yValueFormatString: "$#,##0.#####", xValueType: "dateTime", toolTipContent: "Galenic made - {amp}lt;b{amp}gt;{x}{amp}lt;/b{amp}gt; {amp}lt;/br{amp}gt; Avg: {y}", dataPoints: galenic_made_avg_graph_prices_stats }, ] }); } if(factory_made == true {amp}amp;{amp}amp; galenic_made != true){ var chart = new CanvasJS.Chart(chart_name, { animationEnabled: true, zoomEnabled:true, theme: "light2", title:{ text: "Prices per unit of main active ingredients" }, // subtitles: [{ // text: "High and Low Prices - 2016" // }], axisX: { valueFormatString: "MMM", intervalType: "month", interval: 1 }, axisY: { title: "Price (in USD)", prefix: "$", interval: 0.010, includeZero: false, stripLines:[ { value: max_line, color:"#ff0000", label: "Max threshold", labelFontColor: "#ff0000", showOnTop: true }, { value: min_line, color:"#00bc00", label: "Min threshold", labelFontColor: "#4b4b4b", showOnTop: true } ] }, data: [ { type: "rangeSplineArea", showInLegend: true, legendText: "Factory made max/min Prices", xValueType: "dateTime", xValueFormatString: "DD MMM", yValueFormatString: "$#,##0.#######", toolTipContent: "Factory made - {x}{amp}lt;br{amp}gt;{amp}lt;b{amp}gt;Max:{amp}lt;/b{amp}gt; {y[1]}{amp}lt;br{amp}gt;{amp}lt;b{amp}gt;Min:{amp}lt;/b{amp}gt; {y[0]}", dataPoints: factory_made_max_min_graph_prices }, { type: "spline", showInLegend: true, legendText: "Average Factory Prices", legendMarkerColor: "#dee0ec", color: "#dee0ec", lineColor: "#dee0ec", markerSize: 5, xValueFormatString: "DD MMMM", yValueFormatString: "$#,##0.#####", xValueType: "dateTime", toolTipContent: "Factory made - {amp}lt;b{amp}gt;{x}{amp}lt;/b{amp}gt; {amp}lt;/br{amp}gt; Avg: {y}", dataPoints: factory_made_avg_graph_prices_stats }, ] }); } chart.render(); }; 

Глядя на консоль, я получаю ошибку

 VM596:12 Uncaught ReferenceError: chart is not defined at HTMLInputElement.slider.oninput ({amp}lt;anonymous{amp}gt;:12:9) 

как будто объект диаграммы не виден в глобальной области видимости. Любая идея?

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector