英文:
Highcharts: Make scrollbar only cover the plot area
问题
这是一个示例图表的演示，基于highcharts文档中的滚动条教程：https://jsfiddle.net/zao68u2k/1/
我对默认演示唯一的更改是通过以下方式移除了遮罩：
scrollablePlotArea: {
opacity: 1,
}
现在遮罩已经消失了，滚动条占据整个图表的宽度就没有意义了。我想缩短滚动条，使其只占据绘图区域的宽度，不包括坐标轴，就像我在图片中模拟的那样。这个是否可能？
英文:
Here's a fiddle of a sample chart, based on the scrollbar tutorial on highcharts' docs here: https://jsfiddle.net/zao68u2k/1/
The only changes I made to the default demo were to remove the mask via:
scrollablePlotArea: {
opacity: 1,
}
Now that the mask is gone, it does not make sense for the scrollbar to take up the entire width of the chart. I would like to shorten the scrollbar so that it is only the width of the plot itself and does not include the axis, as I have mocked up in the picture. Is this possible?
答案1
得分: 1
在这种情况下，您应该使用xAxis.scrollbar属性而不是chart.scrollablePlotArea，并设置xAxis.min和xAxis.max：
xAxis: {
min: Date.UTC(2023, 6, 1),
max: Date.UTC(2023, 6, 1, 3),
scrollbar: {
enabled: true
}
}
然而，这是Stock提供的功能，因此需要拥有此产品的许可证，并在项目中导入适当的库：
<script src="https://code.highcharts.com/stock/highstock.js"></script>
演示: https://jsfiddle.net/BlackLabel/rvm1s67w/
API: https://api.highcharts.com/highstock/xAxis.scrollbar
英文:
In this case instead of chart.scrollablePlotArea you should use the xAxis.scrollbar property with xAxis.min and xAxis.max:
xAxis: {
min: Date.UTC(2023, 6, 1),
max: Date.UTC(2023, 6, 1, 3),
scrollbar: {
enabled: true
}
}
However, this is a functionality offered by Stock, so it is necessary to have a license for this product and import the appropriate library in the project:
<script src="https://code.highcharts.com/stock/highstock.js"></script>
Demo: https://jsfiddle.net/BlackLabel/rvm1s67w/ <br/>
API: https://api.highcharts.com/highstock/xAxis.scrollbar
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论