0

用法 - Angular NVD3 LineChart

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

 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。

我怎样才能做到这一点。这是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>
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>

虽然，您将无法使用 html 对轴使用 tickFormat 函数。我相信，您必须掌握图表（使用 d3）并建立自己的轴。

于 2016-05-15T18:50:11.403 回答