Die Aktualisierung ein Highchart aus einem Formular mit einem click () - Ereignis in jquery

Ich habe ein Diagramm, dass ich gerne immer aktualisiert, wenn ein Formular auf der gleichen Seite ist eingereicht. Die var chart = new Highcharts.Chart(options) Ausdruck funktioniert gut von selbst (es zeichnet ein Diagramm). Wenn ich es innerhalb der callback-Funktion für die .click() Ereignis, wenn ich auf die entsprechenden submit-button, wird die aktualisierte plot blinkt auf dem Bildschirm für eine Sekunde und ist dann gelöscht und ersetzt durch den ursprünglichen plot.

Bin ich so nahe das zu tun, was ich brauche, aber ich bin ratlos daher. Vielen Dank für Ihre Hilfe.

Bibliotheken:

<link type="text/css" href="css/cupertino/jquery-ui-1.8.16.custom.css" rel="stylesheet" />      
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>

Hier ist das Javascript:

<script>
  $(function() {
$("#lines").val(),colors: $("#colors").val(),},
var options = {
    chart : {
        renderTo : 'container',
        defaultSeriesType: 'line',
        zoomType: 'xy' },
    title : { text : 'Foo' },
    xAxis: { title: { text: 'x label'  } },
    yAxis: { title: { text: 'y label' } },
    series : {}
}
    var chart = new Highcharts.Chart(options);
    $( "#submit" ).click(function() {
    options.series = [{"name": 10402, "color": "rgba(255,139,0,0.5)", "data": [[ 146,55.8 ],[150,60.9]]},{"name": 10403, "color": "rgba(255,255,0,0.5)", "data": [[ 130,25.8 ],[150,54.9]]}];
    var chart = new Highcharts.Chart(options);
    });

  });
  </script>

Hier ist der HTML-body:

<body>
<form name="chartform" id="chartform">
<input type="submit" id="submit" /><br />
</form>
<div id="container" style="width: 100%; height: 800px"></div>
</body>

Dies treibt mich Nüsse.

InformationsquelleAutor bokov | 2012-01-09
  1. 2

    Dies ist in Ordnung für mich:

    var chart;
$(document).ready(function() {
    options ={ 
        chart: {
         renderTo: 'container',
         defaultSeriesType: 'line',
         zoomType: 'xy'
      },
               title : { text : 'Foo' },
                xAxis: { title: { text: 'x label'  } },
    yAxis: { title: { text: 'y label' } },

        series: {}
              };

   chart = new Highcharts.Chart(options);
   series3 = [{"name": 10402, "color": "rgba(255,139,0,0.5)", data: [[ 146,55.8 ],[150,60.9]]},{"name": 10403, "color": "rgba(255,255,0,0.5)", "data": [[ 130,25.8 ],[150,54.9]]}];
   series2 = [{
         name: '1042',
         color: "rgba(255,139,0,0.5)",
         data: [[ 146,55.8 ],[150,60.9]]
      }, {
         name: '10403',
          color: "rgba(255,255,0,0.5)",
         data: [[ 130,25.8 ],[150,54.9]]
      }];
    $( "#chartform" ).submit(function() {
    options.series = series3;
    var chart = new Highcharts.Chart(options);
return false;
    });


});

    EDIT: ich glaube das problem ist, dass Sie das Formular abgesendet hat. Machen eine Rückkehr false und verwenden submit-handler anstelle von klicken. Sie können es live in: http://jsfiddle.net/bCFHL/157/

    • Ich kann nicht finden, wo meine schlechte Formatierung.
    • Du hast Recht. Das problem wurde in einem anderen Teil. Was ich aktualisiert, sollte funktionieren!
    • Okay, ich habe endlich mir zu laufen. Wenn ich die <input type="submit"> - Taste innerhalb einer <form> dann das problem passiert. Wenn ich es irgendwo draußen, es funktioniert. Umgekehrt, wenn ich Ihre <input type="submit"> in einem Formular Ihre version entwickelt das gleiche problem mit mir hatte! Das macht keinen Sinn überhaupt.
    • Meine version ist in Ordnung. Beachten Sie, dass ich geändert habe, der handler. Kann man den submit-button im Formular, wenn Sie erzwingen, dass der handler von submit "false" zurückgegeben.
    • Überprüfen Sie es live hier: jsfiddle.net/bCFHL/157
    • Ich danke Ihnen so sehr für Ihre Hilfe. Ich verstehe immer noch nicht, warum Formen Sie dies tun, aber das ist zumindest ein workaround.

    InformationsquelleAutor Nobita
Schreibe einen Kommentar