I problemi del grafico a colonna impilati Dojo in aggiunta valore totale impilato sulla cima di impilato

Question

Mi sembra di avere un problema con il mio diagramma di colonna impilato Dojo.Ogni valori di pila sono posizionati "all'interno" il grafico impilato.Ma voglio che questi totali impilati dovrebbero essere in alto ma fuori dal grafico, appena sopra le etichette dell'asse X.Quindi, come faccio a raggiungere dove vengono visualizzati i totali della pila, basta cronometrare le colonne impilate.Ecco il mio jsfiddle link .Qui ho bisogno di mostrare il mio valore totale impilato sulla parte superiore della barra, così come Tooltip per ogni valore impilato anche.

Ecco qui il mio codice è

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

.

Nella mia esperienza, quando ho una serie con il primo valore: 300, e un altro con il primo valore: 244, il tooltip mostra il valore del nome della serie statica: 300 e valore: 244. Quando si libra su queste serie.Vorrei comunque mostrare AC: 300 e TV: 244 con valore totale impilato mostrare sulla parte superiore dell'ottacco del totale: 544. Ma io sono un unico per ottenere questo tipo di valore. Apprezzo qualsiasi aiuto.

Answer 1

Non sono sicuro al 100% quello che stai cercando di ottenere alla fine, ma puoi definitivamente distillare "AC: 300, TV: 244" utilizzando la seguente funzione di testo:

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

.

Vedi anche: http://jsfiddle.net/b45pw/3/

Modifica: Nell'esempio ti manca anche il CSS necessario per il tooltip per presentarsi correttamente.Devi aggiungere:

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

.

e usa la classe CLARO sul tuo corpo:

<body class="claro">

.

Vedi:

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