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

Question

工具提示的值作为文本显示在图表底部的外部。我在 dojo 教程上看到类似的问题，例如。这里..

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

我的所有代码似乎都可以正常工作，而且从各种帖子中我得到的印象是缺少样式 sheet，但我似乎仍然无法查明它。我已经包含了一个主题，以防万一，但我不需要。

可能是一些简单的问题，我知道这里也发布了类似的问题，但我整个周末都在这个问题上失败了，所以任何帮助将不胜感激。

客户控制。

    <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();    
    }

Answer 1

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

设法找到一种可以解决问题的风格sheet。

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

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

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

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

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

谢谢佩尔，你一如既往的正确。

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

Tooltip in Dojo Charting appears outside of the chart

dojox.charting

xpages