javascript - 有没有办法为使用 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 属性来使用浏览器的 native 滚动条。

#chartContainer { overflow-x : scroll ;}