Dojo Charting 中的工具提示出现在图表之外答案

【问题标题】：Tooltip in Dojo Charting appears outside of the chartDojo Charting 中的工具提示出现在图表之外
【发布时间】：2019-01-20 16:03:34
【问题描述】：

我的工具提示值以文本形式显示在底部图表之外。我在 dojo 教程中看到了类似的问题，例如。这里..

https://dojotoolkit.org/documentation/tutorials/1.10/charting/demo/monthly-sales-legend.html

我的所有代码似乎都可以正常工作，并且从各种帖子中我得到了缺少样式表的印象，但我似乎仍然无法确定它。我已经包含了一个主题，如果需要，但我不需要。

可能是一些简单的事情，我知道这里发布了类似的问题，但是我整个周末都在这个问题上迷路了，所以非常感谢任何帮助。

客户控制。

    <xp:div id="chartContracts" style="width: 500px; height: 300px;padding-    top:8px"></xp:div>

<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
require([
    "dojox/charting/Chart",
    "dojox/charting/plot2d/Columns",
    "dojox/charting/themes/Minty",
    "dojox/charting/action2d/Tooltip",
    "dojox/charting/axis2d/Default",        
    "dojo/number",
    "dojo/currency",
    "dojo/domReady!"                        
     ], 
    function(Chart,Columns,Minty,Tooltip) {
    var chart1 = new Chart("#{id:chartContracts}");

    chart1.addPlot("default",{type: Columns,gap:2}
    );
     var tip = new Tooltip(chart1,"default");
    // Add axes
   var varNames = #{contractBean.axisXAxis};
   var funcLabels = function(text) {
        return varNames[text];
    }
    chart1.addAxis("y", {vertical:true,});
   chart1.addAxis("x", {labelFunc:funcLabels, font:"normal normal normal 8pt Tahoma",minorTicks:true,rotation:-90, maxLabelCharCount:11,
   });
      chart1.setTheme(Minty);
     var data = #{contractBean.chartContractsData};
        for (var key in data) {
        chart1.addSeries(key, data[key]);
            };

    chart1.render();

});]]></xp:this.value>
            </xp:scriptBlock>

提供数据的托管 Bean，allContracts 是 Contract 对象的列表，例如。客户名称、价值、利润等。

public void setChartContracts(){
        JsonJavaArray jjaXAxis = new JsonJavaArray();
        JsonJavaObject jjoContracts = new JsonJavaObject();
        jjaXAxis.add("");
        ArrayList<Object> seriesContracts=new ArrayList<Object>();
        Iterator<Contract> it = allContracts.iterator();
        while(it.hasNext()){
            Contract entry = (Contract) it.next();
            Double actTO = entry.getActualTO();

            if(actTO >999.99){ //We only want contracts with a value greater than 999.99
            HashMap<String,Object> mapContracts = new HashMap<String,Object>();
            int actProfit = entry.getActualProfit().intValue();
            mapContracts.put("y",actProfit);
            String col = actProfit<0.00 ? "#ff1a1a" : "#00cc66"; //Colour the columns, green positive red negative.
            mapContracts.put("fill",col);
            mapContracts.put("stroke","");
            mapContracts.put("tooltip","£"+actProfit);
            seriesContracts.add(mapContracts);
            jjaXAxis.add(entry.getCustomerName());
            }
        }
    jjoContracts.put("contracts",seriesContracts);
    chartContractsData = jjoContracts.toString();
    System.out.println(chartContractsData);
    axisXAxis = jjaXAxis.toString();    
    }

【问题讨论】：

马克，你有工作示例的链接吗？
找到了我想 Per，我试图为您设置一个新示例，因此创建了一个新的 nsf 并发现它包含另一个资源。我所有现有的应用程序似乎都缺少此样式表。 href="/xsp/.ibmxspres/.mini/css-1.9.7/@Da&@Ib&2Tfxsp.css&2TfxspLTR.css.css" 你知道为什么会这样吗？
该 CSS 资源是几个 CSS 文件的缩小/聚合版本。如果您禁用“使用运行时优化的 JS 和 CSS 资源”，那么您应该能够查明确切的文件
啊，在我的生产应用程序中勾选了“使用运行时优化的 JS 和 CSS 资源”，它可以工作了。问题是我没有勾选它，因为我记得 jquery 数据表有一个主要问题，与 XPages 和 AMD 有关。所以我现在可能引入了其他问题。
嗯，好的，我去看看，谢谢 Per

标签： xpages dojox.charting

【解决方案1】：

没有按照 Per 的建议尝试删除 AMD，一切都加载在主题中，我只是无法让各种解决方案正常工作。因此，我不能在我的应用程序中“使用运行时优化的 JS 和 CSS 资源”。

设法找到可以解决问题的样式表。

/xsp/.ibmxspres/dojoroot-1.9.7/dijit/themes/tundra/tundra.css

虽然工具提示非常难看。在这方面花费了很长时间，它现在必须这样做。以为我会发布解决方案，即使它并不理想，但它确实有效。

如果有人有更好的解决方案，我将非常感激。

编辑。我确实设法在我的主题中修复了 AMD，-我的资源具有在不处于 AMD 模式时可以使用的语法，-它们缺少 .js ，-我没有意识到在选择使用运行时时它会阻止它们工作优化的 Javascript... 所以我可以将修复程序应用于导致问题的 js DataTable 库资源。在这里的帮助下.. AMD Loader disable, enable in theme

我想我会分享一下，以防其他人在这个问题上浪费了他们的大部分时间。

谢谢 Per，你一如既往的正确。

【讨论】：