0

使用法 - Angular NVD3 LineChart

を取得して、 x 軸に表示millisecondsする形式に変換しています。('%H:%M')

 xAxis: {
          tickFormat: function(d) {
          return d3.time.format('%H:%M')(new Date(d));
        },

上記は正常に機能し、データを format で表示します10:30。

スタイリング10:を別の色と別の形式でフォーマットする必要があります30。

私はJavascriptの下に書いた、

 xAxis: {
          axisLabel: '',
          tickFormat: function(d) {
          var xlabel =  d3.time.format('%H:%M')(new Date(d));
          var xlabelB = xlabel.substring(0, 3);
          var xlabelA = xlabel.substring(3, 5);
          var text = '<span class="lightText">'+ xlabelB + '</span><span class="boldText">' + xlabelA + '</span>';
                            console.log(text);
                            return text;
     },

ただし、上記は 内<Text> tagでレンダリングされるため、html はレンダリングされません。

どうすれば同じことを達成できますか。プランカーはこちら

フォーマット後に生成されたhtmlは次のとおりです。

<text dy=".71em" y="10" transform="" style="text-anchor: middle;"><span class="lightText">10:</span><span class="boldText">30</span></text>

フォーマットする前に

<text dy=".71em" y="10" transform="" style="text-anchor: middle;">10:30</text>
4

1 に答える 1

0

テキストタグ内で tspan を使用するつもりでしたか? tspan を使用すると、以下の例のようにテキストを個別にフォーマットできます

<svg>
  <g>
    <text dy=".71em" y="10" x="0" transform="" style="text-anchor: left;">
      <tspan style="fill:red;">10:</tspan>
      <tspan style="font-weight:bold;">30</tspan>
    </text>
  </g>
</svg>

ただし、軸の tickFormat 関数を使用して html を使用することはできません。(d3 を使用して) チャートを処理し、独自の軸を作成する必要があると思います。

于 2016-05-15T18:50:11.403 に答える