有没有办法为使用dimplejs制作的条形图添加水平滚动条？

Question

我使用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

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

Answer 1

看起来没有内置的滚动条支持。 相反，您可以通过 添加 overflow属性来使用浏览器原生滚动条。

#chartContainer { overflow-x : scroll ;}