javascript - Rails 数据拉入 Highcharts

Question

我的 Ruby on Rails 应用程序中有一个散点图。我正在为公司拥有的每个供应商创建一个点。样本公司只有 4,000 多家供应商。我正在提取每个供应商的名称以用作工具提示信息。问题是数据库查询需要 16 秒以上。当我单击该点时，有没有办法提取数据？目前，所有数据都被拉入图表并在单击某个点时可用。在控制器中，我正在创建一个包含 x、y 和供应商 ID 项的数组：

SupplierScore.where(id: supplier_ids, company_specific: false)
  .group(:x, :y, :supplier_id)
  .order('count_id asc')
  .count(:id)

同样在控制器中，我使用供应商 ID 来拉入所有供应商（这发生在一个each块中）：

data += "{x: #{array[0]}, y: #{array[1]}, marker: {radius: #{radius} }, supplier_name: `#{@suppliers.find_by(id: array[2]).name}` },"

然后，在 highcharts javascript 中，单击某个点时显示供应商名称：

tooltip: {
  enabled: false,
  // show supplier name on tooltip
  formatter: function() {
    return this.point.supplier_name
  }
}

我的代码也设置为仅存储供应商 ID 而不是供应商名称（目前已注释掉）：

data += "{x: #{array[0]}, y: #{array[1]}, marker: {radius: #{radius} }, supplier_id: #{array[2]} },"

我想在使用存储在数组中的供应商 ID 单击点时检索供应商名称，而不是在创建数组时检索所有供应商名称。我希望这将使图表加载得更快。

编辑：

这是完整的控制器操作：

def get_color_points(scores)
  total_count = scores.values.inject(0) { |sum, x| sum + x }

  data_1    = '['
  data_2 = '['

  scores.each do |array, count|
    radius = count / total_count.to_f * 300
    radius = radius < 5 ? 5 : radius
    radius = 5
    if array[1] <= 49
      # data_1 += "{x: #{array[0]}, y: #{array[1]}, marker: {radius: #{radius} }, supplier_id: #{array[2]} },"
      data_1 += "{x: #{array[0]}, y: #{array[1]}, marker: {radius: #{radius} }, supplier_name: `#{@suppliers.find_by(id: array[2]).name}` },"
    else
      # data_2 += "{x: #{array[0]}, y: #{array[1]}, marker: {radius: #{radius} }, supplier_id: #{array[2]} },"
      data_2 += "{x: #{array[0]}, y: #{array[1]}, marker: {radius: #{radius} }, supplier_name: `#{@suppliers.find_by(id: array[2]).name}` },"
    end
  end

  data_1 = orange_data[0, orange_data.length - 1] + ']'
  data_2 = turquoise_data[0, turquoise_data.length - 1] + ']'
  [data_1, data_2]
end

生成的数组如下所示（但包含 4,000 多个项目）：

[
  {x: 44, y: 15, marker: {radius: 5 }, supplier_id: 1792 },
  {x: 47, y: 14, marker: {radius: 5 }, supplier_id: 1816 },
  {x: 91, y: 7,  marker: {radius: 5 }, supplier_id: 3864 },
  {x: 82, y: 17, marker: {radius: 5 }, supplier_id: 1824 },
  {x: 78, y: 1,  marker: {radius: 5 }, supplier_id: 1888 },
  {x: 30, y: 7,  marker: {radius: 5 }, supplier_id: 3952 },
  {x: 77, y: 10, marker: {radius: 5 }, supplier_id: 1936 }
]

标签： javascriptruby-on-railsrubyhighcharts