0

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

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

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

 <div id="graphContainer">

 </div>

为了生成图表。

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

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

谁能指出我正确的方向？

4

1 回答 1

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 文档是一个很好的查看位置，但是正如您所建议的，在您对所有这些东西感到满意之前，您似乎还需要学习更多的东西。

于 2012-10-28T11:50:30.657 回答