Question

我试图点击按钮绘制图表。在下面的代码中，当我点击“点击我”按钮时，我能够在屏幕上看到图形显示，但它很快从屏幕上消失。我的图表没有呈现。我不知道我哪里错了。我需要图表在我的屏幕上保留。一旦我解决了这个问题，我将动态填充数据和类别的值。

由于我现有代码的结构，我需要从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>

Answer 1

它只会持续很短的时间，因为您已将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代码。

Answer 2

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

您有3种方法可以解决此类问题

1.如果您没有发布任何表单值，请删除表单标记，只需添加按钮标记。

2.在按钮点击事件中包含返回false。

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

3.Include按钮类型=＆＃34;按钮＆＃34;在按钮标记元素中。

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

无法在按钮上渲染/保留图形单击HighChart

2 个答案: