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

【问题标题】：Plotting with Flot: Empty Areas Rendered使用 Flot 绘图：渲染的空白区域
【发布时间】：2021-03-02 07:35:35
【问题描述】：

鉴于此 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。这会导致那些空的黄色（第二）和绿色（第三）边框，我想去掉它们。

如何防止绘制空白区域？

【问题讨论】：

标签： jquery flot stacked-chart

【解决方案1】：

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

有关完整示例，请参阅此fiddle。

【讨论】：