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

Question

用法 - Angular NVD3 折线图

我正在获取 milliseconds，将它们转换为 ('%H:%M') 格式以在 x 轴上显示。

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

以上工作正常，并以 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.

我怎样才能达到同样的效果。这是 plunker

这里是格式化后生成的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>

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>

尽管如此，您将无法使用 html 对轴使用 tickFormat 函数。我相信，您必须掌握图表（使用 d3）并构建自己的轴。

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

axis labels styling - Angular NVD3 - Line chart

angularjs

linechart

angularjs-nvd3-directives

angular-nvd3