javascript - 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() 将数组转换为对象键值

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