0

我正在尝试学习如何使用 metricsgraphs.js 库，但折线图有问题。我尝试以与 metricsgraphicsjs.org 示例中指示的相同方式绘制基本折线图，但是在我的图表上方/有时下方（取决于数据）有一些神秘的黑色区域，我不知道如何删除它或者为什么它在那里。

这是我在 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',
});

结果如下所示：

具有随机黑色区域的结果线图

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

4

1 回答 1

0

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

<link rel="stylesheet" href="metricsgraphics.css">
于 2019-02-27T20:28:05.917 回答