如何删除metricsgraphs.js折线图下方/上方的黑色区域?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (57)

我正在尝试学习如何使用metricsgraphs.js库,我遇到了线图的问题。我尝试以与metricsgraphicsjs.org示例中指示的方式相同的方式绘制基本线图,但是在我的图形下面(取决于数据)有一些神秘的黑色区域/ 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',
});

结果如下:

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

是否有人面临与metricsgraphs类似的行为?什么是黑色区域?或者有人知道一些关于metricsgraph.js的好例子而不是它自己的网页吗?(例如关于条形图的一些例子)

提问于
用户回答回答于

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

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

扫码关注云+社区

领取腾讯云代金券