javascript - 有没有一种方法可以为使用dimplejs制作的条形图添加水平滚动条？

我使用dimple.js template制作了条形图。这是代码：

<div id="chartContainer">
<script src="/lib/d3.v3.4.8.js"></script>
<script src="http://dimplejs.org/dist/dimple.v2.1.2.min.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 1000, 1000);
d3.csv("Device_6_energy.csv", function (data) {
  var myChart = new dimple.chart(svg, data);
  myChart.setBounds(60, 30, 6000, 305)
  var x = myChart.addCategoryAxis("x", "Date");
  x.addOrderRule("Time");
  myChart.addMeasureAxis("y", "Consumption");
  //myChart.width = 6000;
  myChart.addSeries(null, dimple.plot.bar);
  myChart.draw();
});

x轴上的值数量巨大。因此，我面临一个问题，其中仅显示图形的一些条形。其余的只是切断。

以下是我的.csv文件中时间的格式。

4/3/2015 20:00
4/3/2015 21:00
4/4/2015 1:00
4/4/2015 3:00
4/4/2015 4:00
4/4/2015 5:00

我想知道是否有一种方法可以在图形的底部添加一个滚动条以查看所有条形直至结束。

最佳答案

似乎没有对滚动条的内置支持。
相反，您可以通过添加overflow属性来使用浏览器的本机滚动条。

#chartContainer { overflow-x : scroll ;}