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>