Dojo 쌓인 컬럼 차트 문제가 겹쳐진 맨 위에있는 총 누적 값 추가

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

  •  21-12-2019
  •  | 
  •  

문제

나는 Dojo 쌓인 컬럼 차트에 문제가있는 것 같습니다.각 스택 값은 누적 된 차트를 "내부"합니다.그러나이 쌓인 합계는 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 및 TV : 244 총 적층 가치가있는 총 누적 값이있는 244 개의 겹쳐서 총 544입니다. 그러나 나는 이러한 유형의 가치를 얻기 위해서는 미합니다. 어떤 도움을 주셔서 감사합니다.

도움이 되었습니까?

해결책

나는 끝에서 달성하려고하는 것을 100 % 확신하지 않지만 다음 텍스트 함수를 사용하여 "AC : 300, TV : 244"를 확실히 Dislpay 할 수 있습니다 : 

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

참고 :

편집 : 예제에서 툴팁에 필요한 CSS가 올바르게 표시됩니다.다음을 추가해야합니다 : 

<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