DOJO Empilé des problèmes de graphique colonne dans l'ajout de la valeur totale empilée sur le dessus de l'empilement

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

  •  21-12-2019
  •  | 
  •  

Question

Je semble avoir un problème avec ma carte de colonne empilée dojo.Chaque valeurs de pile est placée "à l'intérieur" du graphique empilé.Mais je veux que ces totaux empilés soient au sommet mais en dehors de la carte, juste au-dessus des étiquettes X Axe.Alors, comment puis-je réaliser où les totaux de pile sont affichés simplement les colonnes empilées.Voici mon jsfiddle lien .Ici, je dois montrer ma valeur empilée totale sur le haut de la barre, ainsi que la totalité de l'info-bulle pour chaque valeur empilée également.

Voici mon code est

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

Dans mon expérience, lorsque j'ai une série avec une première valeur: 300, et une autre avec la première valeur: 244, l'info-bulle indique la valeur de la série statique: 300 et valeur: 244. Lorsque vous planifiez sur ces séries.J'aimerais que cela montrent toujours AC: 300 et TV: 244 avec une valeur totale sur la valeur empilée montrent sur le dessus de l'empilement au total: 544. Mais je suis unble pour obtenir ce type de valeur. Appréciez toute aide.

Était-ce utile?

La solution

Je ne suis pas sûr à 100% de ce que vous essayez de réaliser à la fin, mais vous pouvez définitivement pas que vous pouvez défaut "AC: 300, TV: 244" en utilisant la fonction de texte suivante:

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

Voir aussi: http://jsfiddle.net/b45pw/3/

Edit: Dans votre exemple, vous manquez également que le CSS requis pour que l'info-bulle soit apparu correctement.Vous devez ajouter:

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

et utilisez la classe Claro sur votre corps:

<body class="claro">

Voir:

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

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top