浮点堆积条

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>