從html表格中的輸入數據創建圖表？

我發現了很多基於jquery和javascript的插件，它們從表格生成圖表，但所有表格值都是硬編碼的。但我的表值是來自用戶的輸入，我需要即時生成圖表。任何想法我怎麼能做到這一點？從html表格中的輸入數據創建圖表？

當前我正在使用canvasjs。

<!DOCTYPE HTML> 
<html> 

<head> 
<title>My Chart</title> 
<script src="https://code.jquery.com/jquery-1.11.1.min.js" integrity="sha256-VAvG3sHdS5LqTT+5A/aeq/bZGa/Uj04xKxY8KM/w9EE=" crossorigin="anonymous"></script> 
<script type="text/javascript" src="jquery.canvasjs.min.js"></script> 

<script type="text/javascript"> 
window.onload = function hello() { 

//Better to construct options first and then pass it as a parameter 
    var options = { 
    title: { 
     text: "My Chart" 
    }, 
      animationEnabled: true, 
    data: [ 
    { 
     type: "column", //change it to line, area, bar, pie, etc 
     dataPoints: [ 
      { x:25, y: 10 }, 
      { x: 20, y: 11 }, 
      { x: 30, y: 14 }, 
      { x: 40, y: 16 }, 
      { x: 50, y: 19 }, 
      { x: 60, y: 15 }, 
      { x: 70, y: 12 }, 
      { x: 80, y: 10 } 
     ] 
    } 
    ] 
}; 

$("#chartContainer").CanvasJSChart(options); 

} 
</script> 
</head> 
<body> 
<div id="chartContainer" style="height: 300px; width: 100%;"></div> 
</body> 

</html>

然後我試圖使用document.getElementById()獲得從輸入變量值，並將其分配給在hello()函數的變量。但它給出了錯誤。

幫助！ :-)

來源

2016-05-13 Prathamesh Prabhudesai

你可以用

jQuery的

var test = $('#inputValue').val()

的JavaScript

var test = document.getElementById("inputValue").value;

嘗試或者你可以告訴我的錯誤嘗試幫助

來源

2016-05-13 20:55:24 Ronald

現在我將其添加到代碼中。 '' –

'var test = document.getElementById（「inputValue」）value;' –

and'x：test' this應該按照邏輯工作。但是當我單擊文本字段時，它不會調用'hello（）'函數。然後它生成圖形，但不考慮已經分配給'test'的字段。 –

Prathamesh，

如果您想添加dataPoint點擊按鈕，您可以使用document.getElementById("inputValue").value和document.getElementById("buttonID").onclick。或者document.getElementById("inputValue").onchange如果您想添加更改值。

檢查此example點擊按鈕時添加值。

來源

2016-05-16 05:47:47

從html表格中的輸入數據創建圖表？

回答

相關問題