jqplot - 堆积图中的单个值，而不是总数

Question

在堆积条形图中，我们可以显示每个堆栈中每个系列的总数，例如这样： 但我想显示每个系列的值，而不是总数，就像这样（请忽略两个示例具有不同数量系列的事实）： 此外，我想在顶部显示堆栈的总计。 我的意思是，如果你看第一个图表，在第一根条形中，值分别为5，15(5+10)，24(15+9)。 我期望的结果应该像第二个图表中的值一样，即10，9和最后一个总计值19
使用这个库是否可行？

- Anupam

Answer 1

这里有一点小技巧。由于您想要每个系列都有一个额外的标签，我引入了一个“空”系列。它几乎可以很好地复制您想要的效果。这是示例链接：http://jsfiddle.net/larsenmtl/Ymca3/3/。

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

生成：

- Mark

---

嗯，太棒了，谢谢。出于某些原因，这个小工具好像无法工作，我猜链接到资源可能有错。不管怎样，还是谢谢。 - Anupam

我为这段代码制作了一个jsfiddle示例，导入了原始的jqPlot脚本，所以如果您有兴趣，可以轻松查看代码运行情况http://jsfiddle.net/Boro/Ymca3/135/。我只需要添加一个字符串连接到`pLabelsTotal.push(""+(s1[i]+s2[i]+s3[i]));`，因为由于某种奇怪的原因，它在每个总数后显示`.00`。而且不久前我也做了类似的解决方案，尽管在我的示例中总数是硬编码的。如果您有兴趣，可以在此处查看https://dev59.com/XV7Va4cB1Zd3GeqPK49Y#10296988。 - Boro

@Boro：我在重新绘制时更新pointLables遇到了问题。你能告诉我这个脚本有什么问题吗？（http://jsfiddle.net/Ymca3/185/）。柱形图可以正确更新，但标签不能。 - Anupam

@anu 我认为你的方法可能没有起作用是因为标签是div，或者重新绘制忽略了标签？无论如何，你可以完全使用新数据绘制一个新的图表，或者在重新绘制后使用 jQuery 自己更正数值，就像这里展示的一样 http://jsfiddle.net/Boro/Ymca3/221/ - Boro

@Boro 嗯，我正在按照你建议的方式进行。谢谢。 - Anupam