如何在函数上调用方法或如何动态重绘高图

How to call a method on a function OR how to redraw Highcharts dynamically

本文关键字：动态 高图 函数 调用 方法 何动态      更新时间：2023-09-26

虽然这个问题是基于Rails和Highcharts，但我怀疑真正的问题是我糟糕的javascript能力。

我正在尝试添加一个Highcharts图表到Rails 3.2应用程序，将所有用户动态更新通过ajax调用显示的数据。

到目前为止，我已经在页面加载上显示图表，但是当用户选择新数据时，我无法让图表重新绘制。从阅读有关SO和其他地方的相关问题，我认为我需要使用Highcharts setData方法。然而，由于我的代码的结构方式，我不确定如何在图表上调用这个方法。

我的代码是这样的:

$(document).ready ->
  if $("#graph_container").length
    fetchData $('#graph_container').data('id') 
fetchData = (id) ->
  params =
    method: "graph_data"
    date_from: $("#date_from").val()
    date_to: $("#date_to").val()
  $.ajax
    url: "/events/" + $('#graph_container').data('id')
    type: "GET"
    async: true
    data: params
    dataType: "json"
    success: (data) ->
      plotData data
plotData = (data) -> 
  options =  
    series: [{
      name: 'Events',
      data: data
    }]
  $("#graph_container").highcharts options

当页面加载时，这是完美的工作。现在我想将刷新绑定到单击事件。从我读到的，我需要做一些像

jQuery ->
  $("#refresh_btn").click ->
    params =
      method: "graph_data"
      date_from: $("#date_from").val()
      date_to: $("#date_to").val()
    $.ajax
      url: "/events/" + $('#graph_container').data('id')
      type: "GET"
      async: true
      data: params
      dataType: "json"
      success: (data) ->
        chart.setData(data)

但是在这个例子中，图表被命名为变量

chart = new Highcharts.Chart(options)

我应该如何修改我的代码，以便我可以调用我的plotData函数的setData。我怀疑这是一个非常初级的javascript问题-我将非常感谢一个解释，这将有助于我学习。

您可以将代码转换为使用构造函数而不是jQuery初始化器:

plotData = (data) -> 
  options =
    chart:
      renderTo: $('#graph_container')
    series: [{
      name: 'Events'
      data: data
    }]
  chart = new Highcharts.Chart(options)

renderTo选项告诉Highcharts渲染到哪个元素。其他都是一样的

如果您计划在plotData之外使用chart，则必须存储对它的引用，以便可以访问它。最简单的方法是将其附加到window，但是全局变量是不允许的。

相关文章：