0

だから私は、単一の「Rickshaw」ウィジェットを使用して、 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 で、CSS のセレクターの名前の DIV ID を定義します...

  .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 に答える