使用HTML和JavaScript將數據傳遞到圖表中

以下代碼用於顯示圖表。問題是「數據」中是硬編碼如何更改此使得其使用顯示在圖表顯示值：使用HTML和JavaScript將數據傳遞到圖表中

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

上述2層div的包含動態值。我想在圖表中顯示這些值。

<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>

來源

2016-04-26 usermb1989

你可以簡單地調用

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

如果它是一個值，它會工作;否則，你需要做的是這樣：

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

這裏，「東西」是什麼，但

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

或者，創建一個由數組：

var array = new Array();

最後，店數據放入數組中。

來源

2016-04-26 22:59:56

所以在JavaScript中，我將如何設置數據點來顯示這些元素？ – usermb1989

按照我的示例傳遞數據和數據2變量名稱。就像數據點一樣：數據。如果您通過鍵入co sole.log（data）獲取正確格式的數據，也請檢查控制檯檢查元素選項卡; –

使用HTML和JavaScript將數據傳遞到圖表中

回答

相關問題