Dojo Stacked Column Collection Проблемы в добавлении общего сложенного значения на верхней части штабелирования

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

  •  21-12-2019
  •  | 
  •  

Вопрос

Я, кажется, испытываю проблему с моим сложенным колонкой Dojo Collection.Каждое значение стека размещены «внутри» сложенного диаграммы.Но я хочу, чтобы эти штабелированные итоги должны быть на вершине, но за пределами диаграммы, чуть выше этикетки оси X.Итак, как мне добиться, где итоги стека отображаются только в верхнем сложенном столбцах.Вот мой jsfiddle Ссылка .Здесь мне нужно показать мою полное сложенное значение на верхней части панели, а также всплывающую подсказку для каждого сложенного значения.

Вот мой код

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

В моем опыте, когда у меня есть серия с первым значением: 300, а другая с первым значением: 244, подсказка показывает значение статического серии, значение имени: 300 и значение: 244. При парении на эти серии.Я хотел бы, чтобы он по-прежнему показать AC: 300 и телевизор: 244 с общей сложным значенным шоу на верхней части штабелированного в общей сложности: 544. Но я RUNBE, чтобы получить этот тип стоимости. Цените любую помощь.

Это было полезно?

Решение

Я не на 100% уверен, что вы пытаетесь достичь в конце, но вы можете определенно Dislpay «AC: 300, TV: 244», используя следующую текстовую функцию:

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

См. Также: http://jsfiddle.net/b45pw/3/

Редактировать: В вашем примере вы также отсутствуете, необходимые для подсказки, необходимые для подсказки, чтобы отобразить правильно.Вам нужно добавить:

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

и используйте класс CLARO на вашем теле:

<body class="claro">
.

См.:

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top