無法呈現/保留按鈕上的圖形點擊HighChart

我想單擊一個按鈕時繪製一個圖形。在我的代碼下面，當我點擊按鈕'點擊我'時，我可以看到圖形顯示在我的屏幕上，但它很快從屏幕消失。我這個圖沒有被渲染。我不確定我會在哪裏出錯。我需要圖表堅持在我的屏幕上。一旦我解決了這個問題，我將動態填充數據和類別的值。無法呈現/保留按鈕上的圖形點擊HighChart

由於我現有代碼的結構，我只需要從javascript函數調用jquery函數。

任何人都可以請讓我知道爲什麼圖形不僅僅是堅持或保留在屏幕上。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
    <html> 
    <head> 
    <title> 
    </title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script> 
<script src="http://code.highcharts.com/highcharts.js" type="text/javascript"></script> 
<script src="http://code.highcharts.com/modules/exporting.js" type="text/javascript"></script> 
<script type="text/javascript"> 

var data= new Array(); 
var categories= new Array(); 
function test() 
{ 
     data=[{ 
       name: 'Part A', 
       data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, null, 18.3, 13.9, 9.6] 
      }, { 
       name: 'Prat B', 
       data: [-0.2, 0.8, 5.7, 11.3, 17.0, null, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5] 
      }, { 
       name: 'Part C', 
       data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0] 
      }, { 
       name: 'Part D', 
       data: [null, 4.2, 5.7, null, null, null, null, null, null, null, 6.6, 4.8] 
      }]; 

     categories=['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];      
    } 
    function my_met(){ 
      alert("hey");    
      $('#container').highcharts({    
      title: { 
       text: 'Monthly Average Temperature', 
       x: -20 //center 
      }, 
      chart: { 
      renderTo: 'container', 
      type: 'area', 
      }, 
      subtitle: { 
       text: 'Source: WorldClimate.com', 
       x: -20 
      }, 
      xAxis: { 
       categories: categories 
      }, 
      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: data 
     })  
    }   
//just js 
function js_fun() { 
    test(); 
    my_met(); //== call jquery function - just Reference is globally defined not function itself 
} 
</script> 
</head> 
<body> 
<div id="container" style="height: 400px"></div> 
</div>  
<div id="city_form"> 
    <form name="contact" action="" method="post"> 
     <button id="control" onclick="js_fun()">Click me</button> 
    </form> 
</div> 
</body> 
</html>

來源

2014-07-21 Pratik Gaglani

只持續了很短的時間，因爲你已經把你的button一個form這裏內：

<form name="contact" action="" method="post"> 
    <button id="control" onclick="js_fun()">Click me</button> 
</form>

當單擊提交表單按鈕。由於action=""將表單提交到同一頁面，並且您需要再次調用js_fun()來呈現圖表。該圖僅顯示點擊按鈕和正在加載的新頁面之間的短時間。

你可以讓你的按鈕代碼：

<button id="control" onclick="js_fun(); return false">Click me</button>

或者只是刪除form標籤，如果你沒有真正刨隨時提交表單。

來源

2014-07-21 10:00:17

如果您沒有爲按鈕標籤元素提供任何類型，它將指向提交。當你點擊按鈕時，表單首先被提交，然後只有JavaScript調用。你沒有提到表單標籤的任何操作，所以表單被提交給同一頁面。所以，按鈕JavaScript單擊事件不會調用，因爲頁面被刷新每按一下按鈕。

你有3種方式解決了這個類型有問題

1.如果您沒有發佈任何形式的值然後取出表單標籤，只是把只有按鈕標籤。

2.在按鈕點擊事件中包含返回false。

 <button id="control" onclick="js_fun(); return false">Click me</button>

3.在button標籤元素中包含button type =「button」。

 <button id="control" type="button" onclick="js_fun();">Click me</button>

來源

2014-07-21 10:20:10

無法呈現/保留按鈕上的圖形點擊HighChart

回答

相關問題