如何解决使用 Flot 绘图:渲染的空白区域
鉴于此 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。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。