直到运行时才知道要生成多少个图。(无法对解决方案进行硬编码)

Question

我正在为我所在的大学创建一个能源使用/分析/管理应用程序。已经有一个在线数据库，该数据库不断更新每个建筑的最新电表额定值。

我的应用程序将有一个页面，其中列出了所有建筑物，可以点击。当用户选择一座建筑物时，应用程序将获取该建筑物的电表读数，并使用“Highcharts”图表库为每个电表生成图形。

应用程序的后端是用Ruby (使用Rails)编写的。在显示由特定构建的图形组成的页面的HTML视图中，我将

 <div id="graphContainer">

 </div>

以便生成图形。

目前，我只需在视图中硬编码上述代码的一个实例，就可以为每个构建页面生成一个图形。

但是，每栋建筑可以有多个电表。由于在HTML方面没有太多经验，当我在运行时才知道需要多少图形时，我不知道如何生成图形。

有谁能给我指个方向吗？

Answer 1

给定一个

<div id="graphContainer"></div>

您可以使用以下命令使用highchart来确定目标

chart1 = new Highcharts.Chart({
  chart: {
    renderTo: '#graphContainer',  //  <=== this selector here  
    type: 'bar'
  },
  //... more options and graph data
});

最初也不必在视图中显示#graphContainer的超文本标记语言。你可以吃点

<div id="graphs-container"></div>

在您的视图中，然后通过Javascript (如下所示的jQuery)，您可以使用一个简单的循环为运行时所需的每个图形构建容器和highchart。

$(function(){
  var highcharts = [];

  for (var i=0; i<charts.length; i++) {
    $('#graphs-container').append($('<div id="graph-container-' + (i+1) + '"/>');

    var highchart = new Highcharts.Chart({
      chart: {
        renderTo: '#graph-container' + (i+1),  //  <=== this selector here  
        type: 'bar'
      },
      //... more options and graph data for chart[i]
    });

    highcharts.push(highchart);
  });
});

您所需要做的就是修改上面的内容以满足您的需要，方法是将charts作为JSON数据发送到视图，其中包含根据Highchart选项和数据集呈现每个特定图形所需的所有内容。

Highcharts文档是一个很好的地方，但是正如你所建议的，在你熟悉所有这些东西之前，你似乎还有更多的学习要做。

• http://www.highcharts.com/documentation/how-to-use