无法在按钮上呈现/保留图形，请单击HighChart

Not able to render/retain graph on button click HighChart

本文关键字：图形 保留 请单击 HighChart 按钮      更新时间：2023-09-26

我正试图在点击按钮时绘制图形。在我的代码下面，当我点击按钮"点击我"，我能够看到图形显示在我的屏幕上，但它很快从屏幕上消失。我想图形没有被渲染。我不确定我哪里做错了。我需要图形在屏幕上持久存在。一旦我解决了这个问题，我将动态地填充数据和类别的值。

我需要从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>

它只会持续很短的时间，因为您在这里将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标签，如果你不打算在任何时候提交表单

如果您没有为按钮标签元素指定任何类型，它将指向submit。当您单击该按钮时，首先提交表单，之后只有JavaScript调用。您没有提到表单标记的任何操作，因此表单被提交到同一页面。因此，按钮JavaScript单击事件不会调用，因为每次单击按钮都会刷新页面。

你有三种方法来解决这种类型的问题

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>
相关文章：