C3中的换行符通过JavaScript生成SVG图表

我需要帮助在html中生成换行符.

使用Javascript

var x = "jun";
var y = "2015";

var calculate= x + "
" + y;

Html返回如下

jan 
 2015

预期结果:我需要在html中换行,但不应该呈现
标记.

更新:我想要的是"jan"在第一行和下一行"2015"

我在c3图表x值中使用这些值.

的jsfiddle

提前致谢.

您的问题声明是有点unprecise:您正在使用C3.js将产生SVG元素.

所以返回的标记实际上是0<br>2014.

C3将使用textContenttspan 的属性来附加函数返回的文本内容.
正如在其他问题中已经说过的那样,您无法在元素中添加换行符.

所以解决方案是在同一个元素中有效地创建一个新的tspan .

不幸的是,没有办法获得这些精确的元素,除非通过循环所有其他tspans,所以这可能听起来像一个真正的黑客,但这里是一个脚本,将做你想要的...

// get our svg doc
var svg  = document.querySelector('svg');
// get our tspans element
var tspans = svg.querySelectorAll('tspan');
// transform it to an array so the clones don't add to the list
var ts = Array.prototype.slice.call(tspans);

for(var i = 0; i



var chart = c3.generate({
    data: {
        json: [{
            date: '2014-01-01',
            upload: 200,
            download: 200,
            total: 400
        }, {
            date: '2014-01-02',
            upload: 100,
            download: 300,
            total: 400
        }, {
            date: '2014-02-01',
            upload: 300,
            download: 200,
            total: 500
        }, {
            date: '2014-02-02',
            upload: 400,
            download: 100,
            total: 500
        }],
        keys: {
            x: 'date',
            value: ['upload', 'download']
        }
    },
    axis: {
        x: {
            type: 'timeseries',
            tick: {
                format: function (x) {
                    if (x.getDate() === 1) {
                        return x.getMonth() + '\n' + x.getFullYear();
                      
                    }
                }
            }
        }
    }
});
// get our svg doc
var svg  = document.querySelector('svg');
// get our tspans element
var tspans = svg.querySelectorAll('tspan');
// transform it to an array so the clones don't add to the list
var ts = Array.prototype.slice.call(tspans);

for(var i = 0; i