0

我主要使用 quickbase，我试图在不使用 API 调用的情况下创建图表。

这是我的代码的工作版本，两个表之间没有任何标签，但是如果它们甚至存在，那么表之间可能有很多标签，这就是结果。

(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);

})();

我添加了一些绒毛来尝试使脚本多次运行，但即使我这样做了，它也只使用了图像中看到的第一组数据。如果该脚本有一个表并获得新的新值，那么使该脚本转到下一个表的最佳方法是什么。

--- 这将是我在 quickbase 字段中输入的文字输入 aiol 和 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类名“mydivTable”而不是 id：

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

现在您可以查询所有以“mydivTable”为类的元素。更改您的脚本文件，以便您正在寻找类而不是 id：

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

更改"#mydivTable"为this可确保您.each()为迭代到的特定元素分配“数据”属性的值Rec。"#mydivtable"既然我们已经更改了您的字段，using 将不会返回任何内容，并且 using将".mydivTable"返回一组元素，而不仅仅是一个。

它应该在这些更改之后开始工作。至少在我自己的模型中它对我有用。

于 2016-07-02T03:33:52.087 回答