问题描述
鉴于此 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",3],0],8] ]
},];
var graphAxis = [ [0,'First'],'Second'],'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。这会导致那些空的黄色（第二个）和绿色（第三个）边界，我想摆脱它们。
如何防止绘制空白区域？
解决方法
您可以通过将 machine learning 中的 0 值替换为 null 来让 Flot 忽略空部分。
有关完整示例，请参阅此 article。