0

私は、通学している大学のエネルギー使用量/分析/管理アプリケーションを作成しています。各建物の最新の電気メーター定格で継続的に更新されるデータベースがオンラインで既に存在します。

私のアプリケーションには、すべての建物がリストされ、クリックできるページがあります。ユーザーが建物を選択すると、アプリケーションはその建物の電気メーターの測定値を取得し、「Highcharts」チャート ライブラリを使用して各メーターのグラフを生成します。

アプリケーションのバックエンドは Ruby (Rails を使用) で記述されています。特定の建物のグラフで構成されるページを表示する HTML ビューに、

 <div id="graphContainer">

 </div>

グラフを生成するため。

現在、上記のコードの 1 つのインスタンスをビューにハードコーディングするだけで、建物のページごとに 1 つのグラフを生成できます。

ただし、各建物には複数の電力メーターを設置できます。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必要な Highchart オプションとデータセットに関して、特定のグラフをレンダリングするために必要なすべてを含む JSON データとしてビューに送信することにより、ニーズに合わせて上記を変更するだけです。

Highcharts のドキュメントは見るのに最適な場所ですが、あなたが提案したように、このようなものに慣れる前に、一般的にもっと学習する必要があるようです.

于 2012-10-28T11:50:30.657 に答える