Flot Stacked Bar

Question

所以我用上面的flot堆叠棒。现在我还有一个悬停效果，当它位于主条内的任何条形图上时，它会显示该部分的数字。我想要展示的是参考当前柱而不是数字的部分百分比，但是我没有看到任何地方我可以得到的总数（即，寻找周围的数字） 4200基于此栏）。

Answer 1

为了获得总数，您需要查看数据并找到系列中与所单击项目对应的元素，然后将它们的值相加。

       <div id="placeholder" style="width:600px;height:300px;"></div>
    <div id="clickdata" ></div>


<script id="source">
$(function () {
    var d1 = [];
    for (var i = 0; i <= 10; i += 1)
        d1.push([i, parseInt(Math.random() * 30)]);

    var d2 = [];
    for (var i = 0; i <= 10; i += 1)
        d2.push([i, parseInt(Math.random() * 30)]);

    var d3 = [];
    for (var i = 0; i <= 10; i += 1)
        d3.push([i, parseInt(Math.random() * 30)]);

    var stack = 0, bars = true, lines = false, steps = false;

    function plotWithOptions() {
       return $.plot($("#placeholder"), [ d1, d2, d3 ], {
            grid: { clickable: true },
            series: {
                stack: stack,
                lines: { show: lines, fill: true, steps: steps },
                bars: { show: bars, barWidth: 0.6, hoverable: true, clickable: true }
            }
        });

    }

    var plot = plotWithOptions();

    function getTotalForIndex(index) {
        var total = parseFloat(d1[index][1]) + parseFloat(d2[index][1]) + parseFloat(d3[index][1]);
        return total;
    }

    $("#placeholder").bind("plotclick", function (event, pos, item) {
        if (item) {
            $("#clickdata").text("You clicked point " + item.dataIndex + " in " + item.series.label + ". which has total value "+ getTotalForIndex(item.dataIndex));
            plot.highlight(item.series, item.datapoint);
        }
    });
});
</script>