jqplot - Individual values, not totals in stacked chart

后端 未结 1 536
走了就别回头了
走了就别回头了 2020-12-31 15:58

In a stacked bar chart we can show total of each series in every stack, like this \"current\" However I want value of

相关标签:
1条回答
  • 2020-12-31 16:33

    A bit of a hack here. Since you want one more label for each series, I've introduced an "empty" series. It replicates what you want pretty well, though. Fiddle here.

    $(document).ready(function(){
      var s1 = [5, 6];
      var s2 = [7, 5];
      var s3 = [14, 9];
      var s4 = [0, 0]; //empty series just for total labels
    
      var pLabels1 = []; // arrays for each inner label
      var pLabels2 = [];
      var pLabels3 = [];
      var pLabelsTotal = []; // array of totals above each column
      for (var i = 0; i < s1.length; i++){
          pLabels1.push('<div style="border:1px solid gray">'+s1[i]+'</div>');
          pLabels2.push('<div style="border:1px solid gray">'+s2[i]+'</div>');
          pLabels3.push('<div style="border:1px solid gray">'+s3[i]+'</div>');
          pLabelsTotal.push(s1[i]+s2[i]+s3[i]);      
      }   
    
      plot3 = $.jqplot('chart2', [s1, s2, s3, s4], {
        // Tell the plot to stack the bars.
        stackSeries: true,
        captureRightClick: true,
        seriesDefaults:{
          renderer:$.jqplot.BarRenderer,
          rendererOptions: {
              // Put a 30 pixel margin between bars.
              barMargin: 30,
              // Highlight bars when mouse button pressed.
              // Disables default highlighting on mouse over.
              highlightMouseDown: true   
          },
        },
        series:[
            {
                pointLabels:{
                    show:true,
                    labels:pLabels1,
                    ypadding: -25,
                    escapeHTML:false
                }
            },
            {
                pointLabels:{
                    show:true,
                    labels:pLabels2,
                    ypadding: -25,
                    escapeHTML:false
                }
            },
                    {
                pointLabels:{
                    show:true,
                    labels:pLabels3,
                    ypadding: -25,
                    escapeHTML:false
                }
            },
                  {
                pointLabels:{
                    show:true,
                    labels:pLabelsTotal,
                    ypadding: 7,
                    escapeHTML:false
                }
            }
        ],
        axes: {
          xaxis: {
              renderer: $.jqplot.CategoryAxisRenderer
          },
          yaxis: {
            padMin: 0,
            min: 0
          }
        },
        legend: {
          show: false,
        }      
      });
    });
    

    Produces:

    enter image description here

    0 讨论(0)
提交回复
热议问题