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>