verloren Punkt-Werkzeug-tipps auf Liniendiagramm (Chart.js) nach je Ajax neu zu zeichnen und verwüstete ältere Line-Chart Diagramm

Question

Guten Morgen Leute,

Ich zeichne ein Line-Diagramm mit Punkten und Tooltips Diagramm mit .js, und um das von Ajax verursachte Flackern zu stoppen, zerstöre ich mein altes Liniendiagramm und erstelle es neu. Meine Tooltips funktionieren jedoch nicht! Ich bin nicht sicher, was das verursacht, und jede Hilfe würde geschätzt werden. Sie können meinen Code unten finden.

Das ist mein Ajax-Aufruf - abgefeuert durch den Wert einer Dropdown-Auswahl zu ändern:

var data; 
    $('#KurveWatt').change(function(){ 
     var y = this.value; 
     if(y == 'kW/Tag') 
     { 
      var urlajax = '/php/lineChartTag.php';    
     } 
     else if(y == 'kW/Woche') 
     { 
      urlajax = '/php/lineChartWoche.php';     
     } 
     else 
     {    
      urlajax = '/php/lineChartStd.php'; 

     } 
     $.ajax({ 
      cache: false, 
      type: 'POST', 
      dataType: 'json', 
      url: urlajax, 
      success: function(data){      
       updateChart(data.labels, data.points); 
       window.myLine.destroy(); 
       window.myChart.destroy(); 

      },    
     }); 

    }); 

Und dies ist die Funktion, die das Line-Diagramm mit neuem Ajax Daten neu gezeichnet:

function updateChart(labels, points){    

     var canvas = $("#wattStd")[0].getContext("2d");  

     var data = { 
       labels: labels, 
       datasets: [ 
        { 
         label: "kW/Std. aktuell", 
         fillColor : "transparent", 
         strokeColor : "#ff9900", 
         pointColor : "#ff9900", 
         pointStrokeColor : "#fff", 
         pointHighlightFill : "#fff", 
         pointHighlightStroke : "#ff9900", 
         data: points 
        } 
       ] 
      }; 

     myChart = new Chart(canvas) 
       .Line(data, { 
       responsive: true, 
       animation: true 
      }); 

    } 

Und das "Original" line-Diagramm, das durch Eingabe der Seite angezeigt wird:

var lineChart = { 
     labels : <?php echo $LClabel; ?>, 
     datasets : [ 
       { 
        label: "kW/Std. aktuell", 
        fillColor : "transparent", 
        strokeColor : "#ff9900", 
        pointColor : "#ff9900", 
        pointStrokeColor : "#fff", 
        pointHighlightFill : "#fff", 
        pointHighlightStroke : "#ff9900", 
        data : <?php echo $LCdata; ?> 
       } 
      ] 
     } 

Und jetzt - Endlich - die Sequenz, das zeichnet die Linie-Diagramm:

var wattStd = document.getElementById("wattStd").getContext("2d"); 
    window.myLine = new Chart(wattStd).Line(lineChart, { 
     responsive: false 
    }); 

im HTML-Area "KurveWatt"

<p class="headline">Verlaufsdiagramm Einspeisung nach <select id="KurveWatt" name="messwert"> 
                <option class="kw" id="std" selected>kW/Std</option> 
                <option class="kw" id="tag">kW/Tag</option> 
                <option class="kw" id="woche">kW/Woche</option> 
                <option class="kw" id="monat">kW/Monat</option> 
                <option class="kw" id="jahr">kW/Jahr</option> 
               </select></p> 

Und der HTML-Bereich mit der Leinwand die Line-Chart:

<div class="kurveWatt" id="watt_std"> 
       <div> 
        <canvas id="wattStd" width="970" height="165"></canvas> 
       </div> 
      </div> 

Answer 1

ich fürchte, ich nicht auf Ihre ursprüngliche Frage äußern können, bis ich genug Ruf zu gewinnen, und als solche ich fürchte, ich habe eine Antwort zu schreiben, aber bitte es nicht akzeptieren, da dies nicht a gültige Antwort Ich werde jedoch versuchen, Ihnen zu helfen.

Ich bin mir nicht sicher, was Ihr Problem ist, ohne einen Code (oder eine aussagekräftigere Beschreibung Ihres Problems) zu sehen. Ich denke jedoch, dass es etwas mit den Daten für Ihre Tooltips zu tun hat. Ajax ruft vielleicht an? Oder es könnten einfach die Daten nicht richtig gerendert werden. Wenn Sie bitte mit einem Read-Only-Git-Repo kommentieren könnten, damit ich Ihnen helfen kann (oder Ihre Frage bearbeiten, um die Code-Snippets einzuschließen), wäre das zu begrüßen.

Hoffe, das hilft.

Answer 2

Das Problem, das Sie hier haben, ist einfach zu verstehen, wie Sie auf Ihre Elemente zugreifen.

HTML-Elemente haben zwei Hauptbezeichner, Klasse und Id. Bitte finden Sie unten, wie diese

div#KurveWatt definiert sind, würde dann diese <div id="KurveWatt"></div>

werden und diese div.KurveWatt würde dann diese als solche <div class="KurveWatt"></div>

werden, # ist Id, und. ist Klasse (dies gilt meistens nur für JQuery DOM Accessoren). Nachfolgend finden Sie eine Beschreibung Ihres Problems.

Wie oben beschrieben, sind Ihre Ids und Klassen durcheinander. Zugriff auf <div id="KurveWatt"></div> in your JQuery, you would need $ ('# KurveWatt') `. Auch für ein besseres Diagrammplugin empfehle ich Ihnen, this site zu besuchen.

Ansonsten kann ich keine Probleme sehen.

Hoffe, das hilft.