Question

用法 - Angular NVD3 应用于LineChart

我收到SELECT UID, switch ( t>1 , '00:15' ,true,format(t,'hh:mm') ) as Time_Elapsed from ( SELECT UID, sum(Time_Elapsed) as t From Table1 Group By UID )，将其转换为milliseconds格式以显示在x轴上。

('%H:%M')

以上工作正常，并以xAxis: { tickFormat: function(d) { return d3.time.format('%H:%M')(new Date(d)); },格式显示数据。

我需要格式化它的样式，10:30使用不同的颜色，10:使用不同的颜色。

我在下面写了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; },内呈现的，因此它不会呈现html。

我怎样才能达到同样的目标。这是plunker

以下是格式化后生成的html

<Text> tag

格式化之前

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

Answer 1

你的意思是在文本标签中使用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）并建立你自己的轴，我相信。

轴标签样式 - Angular NVD3 - 折线图

1 个答案: