Los problemas de la carta de columna apilados de Dojo en Agregar valor apilado total en la parte superior de apilados

Question

Parece que tengo un problema con mi carta de columna apilada de Dojo.Cada valores de pila se colocan "dentro" de la tabla apilada.Pero quiero que estos totales apilados deben estar en la parte superior, pero fuera del gráfico, justo por encima de las etiquetas X Axis.Entonces, ¿cómo logro dónde se muestran los totales de la pila, simplemente las columnas apiladas?Aquí está mi jsfiddle enlace .Aquí necesito mostrar mi valor total apilado en la parte superior de la barra, así como la información sobre herramientas para cada valor apilado también.

Aquí está mi código es

    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: 1500,
     //from:1000,
     //to:6000,
        vertical: true
    });

    chart1.addSeries("AC",[300,500,500,600,300,280] ,
     {

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

        },
        fill: "#FFAEAE "
    });
    chart1.addSeries("TV", [244,301,699,620,820,837], {
        plot: "stackedColumnsPlot",
        stroke: {
            color: "#FFFFFF"
        },
        fill: "#FFEC94"
    });
    chart1.addSeries("ACCE", [500,100,100,100,200,250] , {
        plot: "stackedColumnsPlot",
        stroke: {
            color: "#FFFFFF"
        },
        fill: "#B4D8E7"
    });
    chart1.addSeries("OTHER", [100,150,100,700,700,0,800,300,300] , {
        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");
   });
  });

En mi experiencia, cuando tengo una serie con el primer valor: 300, y otro con el primer valor: 244, la información sobre herramientas muestra la serie estática Valor de Nombre: 300 y valor: 244. Al pasar por encima de estas series.Me gustaría que lo muestre AC: 300 y TV: 244 con el valor total de valor apilado en la parte superior del total de Total: 544. Pero soy un poco para obtener este tipo de valor. Aprecie cualquier ayuda.

Answer 1

No estoy 100% seguro de lo que está tratando de lograr al final, pero definitivamente puede dislutar "AC: 300, TV: 244" utilizando la siguiente función de texto:

        text: function(chartItem, plot) {
            return "AC: "+plot.series[0].data[chartItem.index] +
                ", TV: "+plot.series[1].data[chartItem.index];
        }

Consulte también: http://jsfiddle.net/b45pw/3/

Editar: En su ejemplo, también le está perdiendo el CSS necesario para que la TIP se presente correctamente.Necesitas agregar:

<link rel="stylesheet" href="dojoinstall/dijit/themes/claro/claro.css">

y use la clase Claro en su cuerpo:

<body class="claro">

Ver:

http://jsfiddle.net/b45pw/4/