1

cal-heatmap を使用して、日/価格値の 1 か月 (30 日) カレンダーからこの 1 日を指定します。

<g>
<rect class="q1 graph-rect hover_cursor" width="34" height="34" x="144" y="36">
<title>12345</title>
<text class="subdomain-text" x="161" y="53" text-anchor="middle" dominant-baseline="central"> 8</text>
</g>

オブジェクトがクラス名 ( .q1) を使用してスタイル設定されていることはわかっています。

.subdomain-text{}しかし、すべての要素にヒットする一般的な CSS ルールとは別に、要素のスタイルを設定するにはどうすればよいでしょうか?

.q1 クラスが親要素にアタッチされている<g>場合、子孫の CSS セレクターを使用してこれを処理できます。

1) 私はこれを行うことができるようにしたい:

`g.q1 text {fill:red}`

...これにより、この全体的な日付が .ql css の色の範囲にあるという事実に基づいて、カスタム テキストの色を使用できます。

2）「今日」より前の日のテキストも独自にスタイルしたい...

.subdomain-text {}3）...そして、 CSSルールに由来すると思われるNULL価格に使用されるデフォルトのスタイルを個別にスタイルします。(必ずしもすべての 30 日に価格値があるとは限りません - null の可能性があります)。

.subdomain-text{}デフォルトのルールを超えて要素のスタイルを設定する方法はありますか?

4

3 に答える 3

1

テキスト要素の新しい CSS ルールを記述できます。たとえば、次のようになります。

.cal-heatmap-container{
  .q1  + title + .subdomain-text {
    fill: red;
  }
  .q2,
  .q3,
  .q4,
  .q5{
    + title + .subdomain-text {
      fill: #ffffff;
    }
  }
}

詳細: https://github.com/kamisama/cal-heatmap/issues/143

于 2015-06-07T11:23:53.600 に答える