Übergeben von Daten in ein Diagramm mit HTML und JavaScript

Question

Der folgende Code wird zum Anzeigen eines Diagramms verwendet. Das Problem ist die „Daten“ ist hart codiert in Wie kann ich das so ändern, dass die Grafik zeigt Werte, die mit angezeigt werden.

<div id="name"> </div> 
<div id="testscore"></div> 

Die obigen 2 divs enthalten dynamische Werte. Ich möchte diese Werte im Diagramm anzeigen.

<script type="text/javascript"> 
    window.onload = function() { 
    var chart = new CanvasJS.Chart("chartContainer", 
    { 
//  title:{ 
//  text: "Olympic Medals of all Times (till 2012 Olympics)" 
//  }, 
     animationEnabled: true, 
     legend: { 
     cursor:"pointer", 
     itemclick : function(e) { 
      if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) { 
       e.dataSeries.visible = false; 
      } 
      else { 
       e.dataSeries.visible = true; 
      } 
      chart.render(); 
     } 
     }, 
     axisY: { 
     title: "Time" 
     }, 
     toolTip: { 
     shared: true, 
     content: function(e){ 
      var str = ''; 
      var total = 0 ; 
      var str3; 
      var str2 ; 
      for (var i = 0; i < e.entries.length; i++){ 
      var str1 = "<span style= 'color:"+e.entries[i].dataSeries.color + "'> " + e.entries[i].dataSeries.name + "</span>: <strong>"+ e.entries[i].dataPoint.y + "</strong> <br/>" ; 
      total = e.entries[i].dataPoint.y + total; 
      str = str.concat(str1); 
      } 
      str2 = "<span style = 'color:DodgerBlue; '><strong>"+e.entries[0].dataPoint.label + "</strong></span><br/>"; 
      str3 = "<span style = 'color:Tomato '>Total: </span><strong>" + total + "</strong><br/>"; 

      return (str2.concat(str)).concat(str3); 
     } 

     }, 
     data: [ 
     {   
     type: "bar", 
     showInLegend: true, 
     name: "Black", 
     color: "#000000", 
     dataPoints: [ 
     { y: 0.18, label: "Name"}, 
     { y: 0.12, label: "Name 1"}, 
     { y: 0.59, label: "Name 2"},   
     { y: 1.15, label: "Name 3"},   



     ] 
     }, 
     ] 
    }); 

chart.render(); 
} 
</script> 

Answer 1

Sie können einfach

var data = document.getElementById('name').value; 
var data2 = document.getElementById('testscore').value; 

nennen Wenn ein einzelner Wert ist, funktionieren würde, es; Andernfalls müssen Sie es auf diese Weise tun:

var array = $('#your.id').data('stuff'); 

Hier "stuff" ist nichts anderes als

<div data-stuff="some data" ></div> 

Oder durch ein Array erstellen:

var array = new Array(); 

und schließlich speichern die Daten in das Array.