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

【问题标题】：axis labels styling - Angular NVD3 - Line chart轴标签样式 - Angular NVD3 - 折线图
【发布时间】：2016-04-05 05:34:38
【问题描述】：

用法 - 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>

【问题讨论】：

标签： angularjs linechart angularjs-nvd3-directives angular-nvd3

【解决方案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）并建立自己的轴。

【讨论】：