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

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

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

我正在尝试学习如何使用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">

热门问答

【有奖互动】你是哪个星球的人?

青年码农

晨讯科技 · web前端开发高级工程师 (已认证)

公众号【青年码农】:有趣、有料,有深度、有广度、有热度。

主库的binlog被删掉了,从库是否可以用对应的Relay_Log_File同步?

朱明豪从事Oracle、MySQL等数据库工作10年,擅长性能诊断优化、故障处理、SQL优化、业务架构设计、技术培训等。
推荐
1.Waiting for Slave Workers to free pending events, 可能是出现大事务,可能参数slave_pending_jobs_size_max过小 2.“主库设置了expire_logs_days,所以从库的Relay_Mas...... 展开详请

CDN加速时,当带宽超出所设置阈值后关闭CDN服务,是否可以自动重启CDN服务?

开元

腾讯云 · 高级工程师 (已认证)

专注给云上客户提供优质的服务和行业解决方案
推荐

触发封顶带宽导致域名关闭后,若您希望继续使用 CDN 服务,可以在重新启动域名加速。

详见https://cloud.tencent.com/document/product/228/7541

是否提供海外CDN加速服务(微信小程序云)?

开元

腾讯云 · 高级工程师 (已认证)

专注给云上客户提供优质的服务和行业解决方案
推荐

目前腾讯云是支持海外加速的,CDN加速只和域名有关系,只需要把需要海外加速域名配置海外CDN就就可以。详细见:https://cloud.tencent.com/document/product/673

Dr.Elephant支持hadoop3吗?还有编译一直有包找不到怎么解决?

目前TBDS的hadoop版本是2.7.2,建议配置文件中使用该版本号进行匹配

使用文档遇到问题,可以找谁处理?

推荐已采纳
请叫我雷锋!腾讯云文档有“文档反馈”的功能,直接在文档页面就可以反馈,反馈还有 礼品 ~ 云+社区:问答.png ... 展开详请

所属标签

扫码关注云+社区

领取腾讯云代金券