Dojo gráfico de colunas Empilhadas problemas em adicionar total empilhados valor no topo da empilhados

StackOverflow https://stackoverflow.com//questions/24019497

  •  21-12-2019
  •  | 
  •  

Pergunta

Parece que estou tendo um problema com meu dojo gráfico de colunas empilhadas.Cada pilha de valores de são colocados "dentro" do gráfico empilhado.Mas eu quero que essas empilhados totais deve estar no topo, mas fora do gráfico, logo acima do eixo x rótulos.Então, Como faço para conseguir que a pilha totais são apresentados apenas superior colunas empilhadas .Aqui é o meu jsfiddle link.Aqui eu preciso mostrar meu Total empilhados valor no topo da barra, bem como a descrição para cada empilhados valor também.

Aqui é o meu código é

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

Na minha experiência, quando eu tenho uma série com o primeiro valor:300, e outra com o primeiro valor:244, a dica de ferramenta mostra estática série nome do Valor:300 e valor:244.ao passar o mouse sobre essas séries.Eu gostaria que ele ainda mostrar AC:300 e TV:244 com total empilhados valor show em cima do empilhados como Total:544.Mas eu sou unble para obter esse tipo de valor .Aprecio qualquer ajuda.

Foi útil?

Solução

Eu não tenho 100% de certeza do que você está tentando alcançar o final, mas você pode definitivamente dislpay "AC:300, de TV:244" utilizando a seguinte função de texto:

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

Veja também: http://jsfiddle.net/B45PW/3/

EDITAR:No seu exemplo você também está faltando o CSS necessário para a dica de ferramenta para mostrar correctamente.Você precisa adicionar:

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

e usar o claro de classe no seu corpo:

<body class="claro">

Veja:

http://jsfiddle.net/B45PW/4/

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top