折线图:RangeSlider的背景

时间:2015-07-23 18:54:48

标签: javascript d3.js charts kendo-dataviz chart.js

我想开发一个范围滑块,与http://www.amcharts.com/demos/line-chart-with-scroll-and-zoom/#theme-light

中显示的相同

基本上,我们的想法是开发一个图表并添加一个范围滑块。有什么想法我怎么能把图表设置为范围滑块的背景?

谢谢,

1 个答案:

答案 0 :(得分:1)

背景在rangelider中已经是相同的图表。

您无法在逻辑上将范围滑块移动到主区域 - 您将滑块拖到哪里?

但是,如果你只是想选择一个移动的窗口(比如一个过滤器),你可以通过调整chartScrollbar的大小来填充图表的高度(稍微留下它以便它不会得到)剪掉了)

"scrollbarHeight": 490

并使用CSS隐藏实际图表的组件(点,线,轴,工具提示),以便它们不会干扰。

#chartdiv svg > g:nth-child(<<index of layer to hide>>) {
  display: none;
}

如果你想要轴,用轴标识图表图层并将其设置为转换为翻译(0,0),使其与scrollbarChart重叠。

CodePen - http://codepen.io/anon/pen/waYzpw

enter image description here