1

xCharts のxaxisに改行を追加したい。改行を追加しようとして<tspan>失敗しました。

以下は私がこれまで持っているコードです:

// Set initial data
var data = {
  "xScale": "time",
  "yScale": "linear",
  "type": "line",
  "main": [
    {
      "className": ".foo",
      "data": [
        {
          "x":"2013-08-06 14:30:00",
          "y":12
        },
        {
          "x":"2013-08-06 14:30:01",
          "y":8
        }
      ]
    }
  ]
}

// Set options
var opts = {
  "dataFormatX": function(x) {
    return d3.time.format('%Y-%m-%d %H:%M:%S').parse(x);
  },
  "tickFormatX": function(x) {

    /** This is where I'm adding the <tspan> **/
    return '<tspan>' + d3.time.format('%Y-%m-%d')(x) + '</tspan>'
      + '<tspan x="0" dy="1em">' + d3.time.format('%H:%M:%S')(x) + '</tspan>';
  }
}

// Plot the graph
var recentChart = new xChart('line', data, '#recent-Chart', opts);

下の行に YYYY-MM-DD と HH:MM:SS をプロットする必要があります。ただし、生成された出力は次のとおりです。

<text y="3" x="0" dy=".71em" text-anchor="middle">&lt;tspan&gt;2013-08-06&lt;/tspan&gt;&lt;tspan x="0" dy="1em"&gt;14:30:00&lt;/tspan&gt;</text>

でエスケープし"\<tspan\>"ても同じ結果になります。

改行を挿入するにはどうすればよいですか?

4

0 に答える 0