jqplot-单个值，而不是堆叠图表中的总计 [英] jqplot - Individual values, not totals in stacked chart

问题描述

在堆叠的条形图中，我们可以显示每个堆叠中每个系列的总数，如下所示 但是我希望显示每个系列的值，而不是像这样总计(请忽略两个样本具有不同系列数的事实) 另外，我想在顶部显示堆栈的总数. 我的意思是，如果您看第一张图，在第一栏中，值为5,15(5 + 10)，24(15 + 9). 我想要的结果应该类似于第二张图，其中第一条的值是10,9，最后是顶部19的总和.
这个图书馆有可能吗?

In a stacked bar chart we can show total of each series in every stack, like this However I want value of each series to be shown, not total like this(please ignore the fact that the two samples have different number of series) Additionally I would like to show the total of the stack at the top. What i mean is that, f you look at the first graph, in the first bar, values are 5,15(5+10),24(15+9). My desired result should be like the second graph, where values for the first bar are like, 10,9 and finally a total at the top 19
Is it possible with this library?

推荐答案

此处有些技巧.由于每个系列都需要一个标签，因此我引入了一个空"系列.不过，它可以很好地复制您想要的内容.小提琴此处.

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

产生:

这篇关于jqplot-单个值，而不是堆叠图表中的总计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！