Oracle Apex，甘特图行标签中的换行符

Question

我是 Oracle Apex 的新手，目前我想使用和自定义甘特图。我想要实现的是在行标签中显示换行符。目前，每个换行符都被删除了，我不确定这种情况发生在哪里以及如何防止这种情况发生。标记的文本包含换行符。不要被
搞糊涂了，我只是测试这是否有效。

我只想在每一行中显示更多信息。如果还有其他更优雅的方式，给个小费就好了。

更新：

我做了一些研究，发现了一个关于类似主题的非常好的示例，在本例中是创建自定义工具提示 https://youtu.be/2rZAIR_0tNg?t=2532。我想为 row_axis 标签渲染器做同样的事情，但没有任何可视化。

我使用的渲染函数：

function custom_row_axis_label_renderer(data_context){
    var row_axis_label_elem = document.createElement("g");
    $("row_axis_label_elem").addClass("custom_row_axis_label");
    row_axis_label_elem.innerHTML = '<text font-size="14px">Hello World</text>';
    console.log(row_axis_label_elem);
    return row_axis_label_elem;
}

呈现的元素种类存在，但它从某处获得大小 0x0。

我是不是漏掉了什么？

此致，尼克

Answer 1

与此同时，我找到了有关如何构建自定义渲染器的解决方案。我没有更新的主要部分是您需要传递 x 和 y 坐标才能正确呈现新标签。我在 oracle 论坛上找到了一个合适的例子，但不幸的是我找不到 link 来归功于原始例子。

这是我的代码。它在彼此下方创建了两个文本元素以实现模拟换行符，并添加了一个黄色图标。当然，您可以使用 data_context 对象来访问实际标签。在“函数和全局变量声明”中添加此部分 " 页面的一部分：

custom_row_axis_label_renderer = function (data_context){
    var row_axis_label_elem = document.createElementNS("http://www.w3.org/2000/svg", "g"); 
    var upper_text = document.createElementNS("http://www.w3.org/2000/svg", "text");        
    var lower_text = document.createElementNS("http://www.w3.org/2000/svg", "text");       
    var icon_node = document.createElementNS("http://www.w3.org/2000/svg", "circle");     
   
    upper_text.textContent = "Hello";    
    upper_text.setAttribute("dominant-baseline","text-before-edge");    
    upper_text.setAttribute("class","oj-gantt-row-label");    
    upper_text.setAttribute("font-size","14px");    
    upper_text.setAttribute("text-anchor","end");    
    upper_text.setAttribute("x","220");   
    upper_text.setAttribute("y","5");
    
    lower_text.textContent = "World";    
    lower_text.setAttribute("dominant-baseline","text-before-edge");    
    lower_text.setAttribute("class","oj-gantt-row-label");    
    lower_text.setAttribute("font-size","14px");    
    lower_text.setAttribute("text-anchor","end");    
    lower_text.setAttribute("x","220");   
    lower_text.setAttribute("y","25");
    
    
    icon_node.setAttribute("cx","240");    
    icon_node.setAttribute("cy","25");    
    icon_node.setAttribute("r","8");    
    icon_node.setAttribute("class","u-color-7");
    
    row_axis_label_elem.appendChild(upper_text);  
    row_axis_label_elem.appendChild(lower_text); 
    row_axis_label_elem.appendChild(icon_node); 
    
    return row_axis_label_elem;
}

您还需要设置行轴标签的渲染器。我还使行和任务稍微大一点，以便标签中的两行文本有足够的 space。在你图表的属性中的“JavaScript初始化代码”中添加：

function( options ){
    options.rowAxis.label = {renderer : custom_row_axis_label_renderer};
 
    options.rowDefaults = {height : 60};
    options.taskDefaults = {height: 40};

    return options;
}

Oracle Apex，甘特图行标签中的换行符

Oracle Apex, line break in Gantt Chart Row Label

oracle-apex