NVD3 是否有将滚动条添加到 NVD3 图表的现有方法

nvd3 is there existing way to add a scroller to nvd3 chart?

本文关键字:NVD3 有方法 添加 是否 滚动条      更新时间:2023-09-26

我使用的是 nvd3 图表,但是如果我有很多数据大于图表容器的宽度,则没有滚动条,我找不到添加它的方法。

http://krispo.github.io/angular-nvd3/#/cumulativeLineChart

我试图添加overflow:scrolldiv.chartwrapper包装器。

<div class="chartwrapper" ng-app="app-origin" ng-controller="ctrl">
    <nvd3 options="options2" data="data2"></nvd3>
 </div>

以及图表本身

<nvd3 options="options2" data="data2" class="ng-isolate-scope"><svg height="450px" width="100%"

如何向图表添加滚动条以查看我插入的所有数据?

您可以使用一对div,例如,使用固定宽度来定义滚动:

在 html:

<div class="outer">
  <div class="inner">
    <nvd3 options="options" data="data" class="inner"></nvd3>
  </div>
</div>

在CSS:

div.outer { overflow: scroll; }
div.outer .inner { width: 1024px; }

查看基于原始样本的 plunker