dojo堆积柱形图中的工具提示问题答案

【问题标题】：Tooltips issues in dojo stacked column chartdojo堆积柱形图中的工具提示问题
【发布时间】：2014-05-29 12:36:18
【问题描述】：

现在我正在玩道场柱形图和堆叠图。页面加载时它工作正常。当我将鼠标悬停在不同的堆叠字段上并且无法显示工具提示时。所以请向您询问如何在鼠标悬停时显示我的工具提示以及受人尊敬的系列名称。这是我的 js fiddle [链接][http://jsfiddle.net/kairi/S4tH2/]。

请问我如何在鼠标悬停时显示我的工具提示和相应的字段。

所以这是我的代码

  require(["dojox/charting/Chart", 
 "dojox/charting/plot2d/Lines", 
 "dojox/charting/axis2d/Default", 
 "dojox/charting/plot2d/StackedColumns",
  "dojox/charting/action2d/Tooltip",
  "dojo/ready", 
  "dojox/charting/widget/SelectableLegend"],
   function(Chart, Lines, Default, StackedColumns, Tooltip, ready, SelectableLegend) {
ready(function() {
    var chart1 = new Chart("chart1");
    chart1.title = "stacked chart";
    chart1.addPlot("stackedColumnsPlot", {
        type: StackedColumns,
        gap:6,
        lines: true,
        areas: true,
        markers: true,
        labels: true,
        labelStyle:"inside",
        //maxBarSize: 35,
        tension: "2"
    });
chart1.addAxis("x", {  
                      dropLabels: false,
                      labelSizeChange: true,
                      rotation:-20,
                      majorTicks:true,
                      majorTickStep:1,
                      minorTicks:false,
                      font: "normal normal bold 12px Tahoma", 
                      fontColor: "black",
                     labels: [{"value":1,"text":"A"},{"value":2,"text":"B"},{"value":3,"text":"C"},{"value":4,"text":"D"},{"value":5,"text":"E"},{"value":6,"text":"F"}] 
});
    chart1.addAxis("y", {title:"Cost",
      fixLower: "major",
      fixUpper: "major", 
       includeZero: true,
      majorTickStep:500,
     max: 7000,
     //from:1000,
     //to:6000,
        vertical: true
    });

    chart1.addSeries("AC",[3000,5000,5500,6000,1300,8280] ,

     {

        plot: "stackedColumnsPlot",
        stroke: {
            color: "#FFFFFF" ,

        },
        fill: "#FFAEAE "
    });
    chart1.addSeries("TV", [2844,7301,6699,620,820,9683] , {
        plot: "stackedColumnsPlot",
        stroke: {
            color: "#FFFFFF"
        },
        fill: "#FFEC94"
    });
    chart1.addSeries("ACCE", [5000,1000,1000,1000,2500,2500] , {
        plot: "stackedColumnsPlot",
        stroke: {
            color: "#FFFFFF"
        },
        fill: "#B4D8E7"
    });
    chart1.addSeries("OTHER", [1500,150,1500,700,7000,0,8000,1300,1300] , {
        plot: "stackedColumnsPlot",
        stroke: {
            color: "#FFFFFF"
        },
        fill: "#56BAEC"
    });

    new Tooltip(chart1, "stackedColumnsPlot", {
        text: function(chartItem) {
            console.debug(chartItem);
        //return "Rating: " + chartItem.run.data[chartItem.index] + "; Total Value: " +   chartItem.y;
          // return  "Comparision Rating: " + chartItem.y;
           return "Value: " + chartItem.run.data[chartItem.index] + "; Stacked Value: "   + chartItem.y;
        }
    }); 

    chart1.render();

    new SelectableLegend({
        chart: chart1,
        horizontal: true,
        align:top
    }, "chart1SelectableLegend");
   });
   });

在这里，我想要针对不同系列的不同工具提示。所以这怎么可能。

【问题讨论】：

@sica07 你能帮我解答这个问题吗
@GoinOff 你能帮我解答这个问题吗

标签： javascript dojo dojox.charting

【解决方案1】：

您只是缺少 dojo css 和 body 类属性。

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.3/dojo/resources/dojo.css"> 
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.3/dijit/themes/claro/claro.css" type="text/css">

<body class="claro">
<div data-dojo-type="dojox.charting.widget.Chart" id="chart1" style="width: 800px; height: 450px;">

</div>
<div id="chart1SelectableLegend"></div>
</body>

【讨论】：