使用 Flot 绘图：渲染空白区域

Question

鉴于此 HTML（使用 jquery 3.5.1 和 flot 0.8.3）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Flot Issue</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
        <script src="plot.js"></script>
    </head>
    <body>
        <h1>Flot Issue</h1>
        <div id="plot-area" style="width: 800px; height: 400px;"></div>
    </body>
</html>

我想将一些数据绘制成堆积条形图 (plot.js):

"use strict";

$(function () {

    var graphData = [
        {
            label: "foo",
            data: [ [0, 6], [1, 5], [2, 0] ]
        },
        {
            label: "bar",
            data: [ [0, 3], [1, 0], [2, 8] ]
        },
    ];

    var graphAxis = [ [0, 'First'], [1, 'Second'], [2, 'Third'] ];

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

    function plot() {
        $.plot($("#plot-area"), graphData, {
            series: {
                stack: stack,
                lines: { show: lines, steps: steps },
                bars: { show: bars, barWidth: 0.6, align: "center" },
            },
            xaxis : {
                ticks: graphAxis,
                autoscaleMargin: 0.02
            },
            yaxis : {
                min: 0,
                tickDecimals: 0,
                minTickSize: 1
            },
            legend : {
                noColumns: 3
            },
            colors: ["#4da74d","#edc240","#afd8f8","#9440ed","#cb4b4b"]
        });
    }

    plot();

});

绘图确实有效：

但是，在“第二”和“第三”栏的底部，为两个类别绘制了栏，即使其中一个的面积为 0。这导致了那些空的黄色（第二个）和绿色（第三个）边框，我想去掉它们。

如何防止绘制空白区域？

Answer 1

您可以通过将 graphData 中的 0 值替换为 null 来让 Flot 忽略空白部分。

查看此 fiddle 以获得完整示例。

使用 Flot 绘图：渲染空白区域

Plotting with Flot: Empty Areas Rendered

jquery

flot

stacked-chart