如何去除黑色区域 below/above metricsgraphs.js 折线图？

Question

我正在尝试学习如何使用 metricsgraphs.js 库，但遇到折线图问题。我尝试按照 metricsgraphicsjs.org 示例中指示的方式绘制基本折线图，但在我的图表（取决于数据）下有一些神秘的黑色区域 over/sometimses，我没有任何线索如何删除它或为什么它在那里。

这是我在 html 文件中导入的内容：

<script type="text/javascript" src="kirjastot/jquery-3.3.1.min.js"></script> 
<script type="text/javascript" src="kirjastot/tooltip.js"></script>
<script type="text/javascript" src="kirjastot/d3.js"></script>
<script type="text/javascript" src="kirjastot/popper.min.js"></script>
<script type="text/javascript" src="kirjastot/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="kirjastot/bootstrap/css/bootstrap.css">
<script type="text/javascript" src="kirjastot/mg/MG.js"></script>
<script type="text/javascript" src="kirjastot/mg/common/brush.js"></script>
<script type="text/javascript" src="kirjastot/mg/common/chart_title.js"></script>
<script type="text/javascript" src="kirjastot/mg/common/data_graphic.js"></script>
<script type="text/javascript" src="kirjastot/mg/common/hooks.js"></script>
<script type="text/javascript" src="kirjastot/mg/common/init.js"></script>
<script type="text/javascript" src="kirjastot/mg/common/markers.js"></script>
<script type="text/javascript" src="kirjastot/mg/common/register.js"></script>
<script type="text/javascript" src="kirjastot/mg/common/rollover.js"></script>
<script type="text/javascript" src="kirjastot/mg/common/scales.js"></script>
<script type="text/javascript" src="kirjastot/mg/common/window_listeners.js"></script>
<script type="text/javascript" src="kirjastot/mg/common/x_axis.js"></script>
<script type="text/javascript" src="kirjastot/mg/common/y_axis.js"></script>
<script type="text/javascript" src="kirjastot/mg/common/zoom.js"></script>
<script type="text/javascript" src="kirjastot/mg/charts/bar.js"></script>
<script type="text/javascript" src="kirjastot/mg/charts/histogram.js"></script>
<script type="text/javascript" src="kirjastot/mg/charts/line.js"></script>
<script type="text/javascript" src="kirjastot/mg/charts/missing.js"></script>
<script type="text/javascript" src="kirjastot/mg/charts/point.js"></script>
<script type="text/javascript" src="kirjastot/mg/charts/table.js"></script>
<script type="text/javascript" src="kirjastot/mg/layout/button.js"></script>
<script type="text/javascript" src="kirjastot/mg/misc/error.js"></script>
<script type="text/javascript" src="kirjastot/mg/misc/formatters.js"></script>
<script type="text/javascript" src="kirjastot/mg/misc/markup.js"></script>
<script type="text/javascript" src="kirjastot/mg/misc/process.js"></script>
<script type="text/javascript" src="kirjastot/mg/misc/smoothers.js"></script>
<script type="text/javascript" src="kirjastot/mg/misc/transitions.js"></script>
<script type="text/javascript" src="kirjastot/mg/misc/utility.js"></script>
<script type="text/javascript" src="kirjastot/mg/common/bootstrap_tooltip_popover.js"></script>
<script type="text/javascript" src="kirjastot/mg/layout/bootstrap_dropdown.js"></script>

这就是我在 javascript 中绘制图表的方式：

var data = [{ temperature: 20, time: 1 }, { temperature: 20, time: 2 }, { temperature: 29, time: 3 }, { temperature: 10, time: 4 }, { temperature: 5, time: 5 }];
MG.data_graphic({
    title: "Line",
    data: data,
    area: false,
    target: '#testi',
    x_accessor: 'time',
    y_accessor: 'temperature',
});

结果如下所示：

Result line graph with random black area

有人遇到过类似的指标图行为吗？那个黑色区域是什么？或者有人知道一些关于 metricsgraph.js 的好例子而不是它自己的网页吗？（例如一些关于条形图的例子）

Answer 1

添加缺少的样式表 metricsgraphics.css 解决了问题。

<link rel="stylesheet" href="metricsgraphics.css">

如何去除黑色区域 below/above metricsgraphs.js 折线图？

How to remove black area below/above metricsgraphs.js line graph?

javascript

d3.js

metricsgraphicsjs