Flot堆叠条形

Question

​

​

因此，我有上面的flot堆叠酒吧使用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>