Jquery 獲取元素值，然后將其設置到圖表js中

Question

這是我可以與用戶一起添加的輸入字段（它是重復字段），以及我使用 chart.js 創建的圖表

我想在圖表中顯示用戶輸入值。 用戶填寫輸入元素。

單擊一個簡單的按鈕后，我想用圖表列動態替換用戶輸入值。

這是我的代碼：

 anychart.onDocumentLoad(function() { var chart = anychart.column([ ["Winter", 2], ["Spring", 7], ["Summer", 6], ["Fall", 10] ]); // set chart title chart.title("chart title"); // set chart container and draw chart.container("container").draw(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <link href="https://cdn.anychart.com/css/latest/anychart-ui.css" rel="stylesheet"/> <script src="https://cdn.anychart.com/js/latest/anychart-bundle.min.js"></script> <table class="acf-table"> <tbody> <tr> <td class="example"> <input type="text" value="99"> </td> </tr> <tr> <td class="example"> <input type="text" value="67"> </td> </tr> <tr> <td class="example"> <input type="text" value="45"> </td> </tr> <tr> <td class="example"> <input type="text" value="87"> </td> </tr> </tbody> </table> <div id="container"></div>

Answer 1

你必須

• 使用anychart.data.set()
• 使用dataSet.mapAs()將數組轉換為 object 鍵值
• 將input事件添加到輸入元素
• 並更新.set(index, [object key name], newValue)

 anychart.onDocumentLoad(function() { var dataSet = anychart.data.set([ ["Winter", 2], ["Spring", 7], ["Summer", 6], ["Fall", 10] ]); var chart = anychart.column(); // set chart title chart.title("chart title"); // set data var column = chart.column(dataSet); var view = dataSet.mapAs({ key: 0, value: 1 }); // set chart container and draw chart.container("container").draw(); // update on input $('.example input').each(function(index, item) { $(item).on('input', function() { console.log(view.get(index, 'key'), item.value) view.set(index, 'value', item.value) }) }) });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <link href="https://cdn.anychart.com/css/latest/anychart-ui.css" rel="stylesheet" /> <script src="https://cdn.anychart.com/js/latest/anychart-bundle.min.js"></script> <table class="acf-table"> <tbody> <tr> <td class="example"> <input type="text" value="2"> </td> </tr> <tr> <td class="example"> <input type="text" value="7"> </td> </tr> <tr> <td class="example"> <input type="text" value="6"> </td> </tr> <tr> <td class="example"> <input type="text" value="10"> </td> </tr> </tbody> </table> <div id="container"></div>