0

因此，我使用单个“人力车”小部件在Dashing上运行了许多不同的图表。我想使用 CSS 选择器来定义 x 轴视图。我目前是这样设置的...

它dashboard.erb：

<li data-row="1" data-col="1" data-sizex="6" data-sizey="6">
  <div id="weekly" data-id="etvvrb" data-view="Rickshawgraph" data-title="Weekly ETV reach" data-moreinfo="Week commencing" data-color-scheme="rainbow" data-renderer="line" data-x-axis="weekly"></div>
</li>

这为 CSS 中选择器的名称定义了一个 DIV ID，在 CSS 中我们有...

  .x_tick {
    position: absolute;
    bottom: 0;
    fill: $tick-color;

    .title {
      font-size: 20px;
      color: $tick-color;
      opacity: 0.5;
      padding-bottom: 3px;
    }
  }

  #weekly.x_tick  {   
    position: absolute;
    bottom: 0;
    fill: $tick-color;

      .title {
      font-size: 9px;
      color: $tick-color;
      opacity: 0.5;
      padding-bottom: 3px;
      writing-mode:tb-rl;
      -webkit-transform:rotate(90deg);
      -moz-transform:rotate(90deg);
      -o-transform: rotate(90deg);
      -ms-transform:rotate(90deg);
      white-space:nowrap;
      display:block;
      bottom:0;
      width:0.5px;
      height:20px;
    }
  }

本质上我会假设它会读取 ID 并为该 ID 使用不同的 CSS，但它似乎完全忽略了它。我有一种感觉，ID 根本没有像我预期的那样被传递，我不确定为什么。

如果有人有任何这样做的背景，尤其是在使用 Dashing 方面，任何建议将不胜感激。

4

1 回答 1

2

我已经想通了。

Dashing 将生成一个基于 data-id 和 data-view 标签的类对象（可能通过 JS，但我可能错了）。

这看起来像widget-data-view.data-id。

这意味着您可以使用 JS 生成的元素在 CSS 文档中创建一个新类。就我而言，这看起来像：

   .widget-rickshawgraph {
       /* CSS stuff */
    }

   .widget-rickshawgraph.DATA-ID {
        .x_tick > .title {
      /* CSS overwrite */
   }

希望这是有道理的。谢谢 ：）

于 2015-01-27T10:17:37.357 回答