0

私は主にクイックベースを使用しており、API 呼び出しを使用せずにグラフを作成しようとしています。

これは、2 つのテーブル間にタグを持たない私のコードの作業バージョンですが、テーブル間に多くのタグが存在する場合でも、テーブル間に多くのタグが存在する可能性があります。

(function() {

  setTimeout(function() {

    $("#mydivTable").each(function() {

      var Rec = $('#mydivTable').attr('data');

      console.log(Rec);

      var valueArray = Array(5).fill(Rec).map(function(n, i) {

        return $('#Row' + n + '-' + i).attr('data');

      });

      var content = "";

      content += "div.div-table { display: table; width: auto; background-color: #eee;  width: 350px;} \n";

      content += "div.div-table2 { display: table; width: auto; width: 300;} \n";

      content += "div.div-table-row { display: table-row; width: auto; clear: both;} \n";

      content += "div.div-table-lcol { float: left; display: table-column; width: 50px;} \n";

      content += "div.div-table-rcol { float: left; display: table-column; width: 300px;} \n";

      content += "div.div-table-ircol { float: left; display: table-column; width: auto;} \n";

      content += "div.div-table-0lcol { float: left; display: table-column; background-color:#0099CC;}\n";

      var maxW = 300;

      var maxV = Math.max(...valueArray);

      var ratio = (maxW / maxV);

      var wratio = ratio.toFixed(2);

      for (var i = 0; i < valueArray.length; i++) {

        var tratio = valueArray[i] * wratio;

        tratio == tratio.toFixed(0);

        if (tratio <= 20) {
          tratio = 20;
        }

        content +=

          "\n #Row" + Rec + "-" + i + "{width:" + tratio + "px; color: #FFF; text-align: center;} ";

      }

      console.log(content);

      $('head').append('<style type="text/css" ID=' + Rec + '>' + content + '</style>');

    });

  }, 600);

})();

スクリプトを複数回実行するために綿毛を追加しましたが、実行した場合でも、画像に表示されている最初のデータセットのみを使用しました。このスクリプトを次のテーブルに移動させ、新しい値を取得する最良の方法は何でしょうか。

--- これはクイックベースのフィールドに入力したリテラル入力であり、iol はスクリプトへの呼び出しです。

"<div class='div-table' id='mydivTable' style='width: 355px;' data='"&[Record ID#]&"'>"& "
  <div class='div-table-row'>"& "
    <div class='div-table-lcol'>Apples</div>"& "
    <div class='div-table-rcol'>"& "
      <div class='div-table2'>"& "
        <div class='div-table-row'>"& "
          <div class='div-table-0lcol' id='Row"&[Record ID#]&"-0' data='"&[Apples]&"'>"&[Apples]&"</div>"& "
          <div class='div-table-ircol'>"& " </div>"& " </div>"& " </div>"& " </div>"& " </div>"& "
  <div class='div-table-row'>"& "
    <div class='div-table-lcol'>Oranges</div>"& "
    <div class='div-table-rcol'>"& "
      <div class='div-table2'>"& "
        <div class='div-table-row'>"& "
          <div class='div-table-0lcol' id='Row"&[Record ID#]&"-1' data='"&[Oranges]&"'>"&[Oranges]&"</div>"& "
          <div class='div-table-ircol'>"& " </div>"& " </div>"& " </div>"& " </div>"& " </div>"& "
  <div class='div-table-row'>"& "
    <div class='div-table-lcol'>Peaches</div>"& "
    <div class='div-table-rcol'>"& "
      <div class='div-table2'>"& "
        <div class='div-table-row'>"& "
          <div class='div-table-0lcol' id='Row"&[Record ID#]&"-2' data='"&[Peaches]&"'>"&[Peaches]&"</div>"& "
          <div class='div-table-ircol'>"& " </div>"&"</div>"&"</div>"&"</div>"&"</div>"& "
  <div class='div-table-row'>"& "
    <div class='div-table-lcol'>Bananas</div>"& "
    <div class='div-table-rcol'>"& "
      <div class='div-table2'>"& "
        <div class='div-table-row'>"& "
          <div class='div-table-0lcol' id='Row"&[Record ID#]&"-3' data='"&[Bananas]&"'>"&[Bananas]&"</div>"& "
          <div class='div-table-ircol'>"& " </div>"&"</div>"&"</div>"&"</div>"&"</div>"& "
  <div class='div-table-row'>"& "
    <div class='div-table-lcol'>Pears</div>"& "
    <div class='div-table-rcol'>"& "
      <div class='div-table2'>"& "
        <div class='div-table-row'>"& "
          <div class='div-table-0lcol' id='Row"&[Record ID#]&"-4' data='"&[Pears]&"'>"&[Pears]&"</div>"& "
          <div class='div-table-ircol'>"& " </div>"&"</div>"&"</div>"&"</div>"&"</div>"&"</div>"&[aiol]&[Record ID#]&[/aiol]&"chart1.js"&[/iol]
4

1 に答える 1

0

ここであなたが抱えている主な問題は、id 値の繰り返しだと思います。レポートの各レコードにはDIVwith がありid='mydivTable'ます。id 値はドキュメント内で繰り返されることを意図しておらず、そうすると予期しない動作が発生する可能性があります。この例で$('#mydivTable')は、スクリプト内の呼び出しは最初の要素のみを返しています。幸いなことに、それは比較的簡単に修正できるようです。

まず、forcedgraphフィールドの式の最初の行を変更してDIV、ID の代わりに「mydivTable」というクラス名を指定します。

"<div class='div-table mydivTable' style='width: 355px;' data='"

これで、「mydivTable」をクラスとして持つすべての要素を照会できます。ID ではなくクラスを検索するようにスクリプト ファイルを変更します。

  $(".mydivTable").each(function() {
      var Rec = $(this).attr('data');

に変更"#mydivTable"すると、 までthis繰り返される特定の要素の 'data' 属性の値が確実に割り当て.each()られRecます。フィールドを変更したため、 using"#mydivtable"は何も返しません。 using".mydivTable"は、1 つではなく要素のコレクションを返します。

これらの変更後に動作を開始する必要があります。少なくとも、私自身のモックアップではそうでした。

于 2016-07-02T03:33:52.087 に答える