不知道在运行时间之前要生成多少个图表。 （然后不能硬编码解决方案）

Question

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

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

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

 <div id="graphContainer">

 </div>

以生成图表。

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

但是，每栋建筑都可以有多个电表。由于没有那么多的HTML经验，我不知道如何在运行时间之前知道我需要多少图表。

有人能指出我正确的方向吗？

Answer 1

给出

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

您可以使用

以高图为目标

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

您最初也不必在视图中使用#graphContainer的HTML。你可以有一些

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

在您的视图中，然后通过Javascript （下面的jQuery），您可以通过简单的循环为运行时所需的每个图形构建容器和高图。

$(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