javascript - 提交表单数据到Highcharts addPoint方法动态更新表单

Question

我目前有一个从本地 JSON 文件提取数据的图表。我现在需要通过表单提交数据以动态更新图表。我知道 Highcharts 有一个应该可以工作的 addPoint 方法，只需要一些有关如何将表单数据传递给此方法的指导。

  <form id="add_data">
    <p>
      <input type="date" name="date" id="human" value="date" />
    </p>
    <p>
      <input type="integer" name="amount" id="amount" value="amount" />
    </p>
    <p>
      <input type="radio" name="request_type" id="human" value="human" />
      <label for="human">Human</label>
    </p>
    <p>
      <input type="radio" name="request_type" id="good" value="good" />
      <label for="good">Good</label>
    </p>
    <p>
      <input type="radio" name="request_type" id="bad" value="bad" />
      <label for="bad">Bad</label>
    </p>
    <p>
      <input type="radio" name="request_type" id="whitelist" value="whitelist" />
      <label for="whitelist">Whitelist</label>
    </p>
    <input id="submit" type="submit" value="Submit">
  </form>

Highcharts 文档使用此作为示例，这就是我正在尝试使用的，但我不需要对数据进行硬编码，而是需要传入表单数据。我想...如果我完全不在，请告诉我。如有任何帮助，我们将不胜感激。

$('#add_data   input:radio[name=request_type]').click(function() {
  $index = $('#add_data input:radio[name=request_type]').index(this);
});

$('#submit').click(function() {
  var chart = $('#container').highcharts(),
    amount = parseFloat($('#amount').val());
  chart.series[$index].addPoint(amount);
});

Answer 1

在点击操作中，您需要从输入中提取值。例如，如果您需要使用输入 AMOUNT 中的值添加点，则应使用如下方式:

$('#submit').click(function() {
    var chart = $('#container').highcharts(),
        point = parseFloat($('#amount').val());

    chart.series[0].addPoint(point);
    i += 1;
});