chartScrollbar AmCharts

AmCharts 是一个流行的 JavaScript 图表库，用于创建各种类型的交互式图表。chartScrollbar 是 AmCharts 中的一个功能，用于在图表中添加滚动条，以便用户可以滚动查看更多数据。

以下是关于 chartScrollbar 的一些关键点和示例：

关键点

基本功能
- chartScrollbar 允许用户在图表中滚动查看数据。
- 可以用于时间序列数据、分类数据等。
配置选项
- enabled: 启用或禁用滚动条。
- scrollbarHeight: 设置滚动条的高度。
- backgroundColor: 设置滚动条的背景颜色。
- selectedBackgroundColor: 设置选中区域的背景颜色。
- graph: 关联的图表对象，用于显示滚动条中的数据。
事件
- zoomed: 当用户滚动或缩放时触发，可以用于更新其他图表或界面元素。
样式和外观
- 可以自定义滚动条的样式和外观，以匹配图表的整体设计。

示例代码

以下是一个简单的示例，展示如何在 AmCharts 中使用 chartScrollbar：

html

<!DOCTYPE html>
<html>
<head>
    <title>AmCharts ChartScrollbar Example</title>
    <script src="https://cdn.amcharts.com/lib/4/core.js"></script>
    <script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
    <script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
</head>
<body>
    <div id="chartdiv" style="width: 100%; height: 500px;"></div>
    <script>
        // 使用 am4core 创建图表实例
        am4core.ready(function() {
            // 使用动画主题
            am4core.useTheme(am4themes_animated);

            // 创建 XYChart 实例
            var chart = am4core.create("chartdiv", am4charts.XYChart);

            // 添加数据
            chart.data = [{
                "date": new Date(2023, 0, 1),
                "value": 50
            }, {
                "date": new Date(2023, 0, 2),
                "value": 55
            }, {
                "date": new Date(2023, 0, 3),
                "value": 60
            }, {
                "date": new Date(2023, 0, 4),
                "value": 65
            }, {
                "date": new Date(2023, 0, 5),
                "value": 70
            }];

            // 创建 X 轴
            var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
            dateAxis.renderer.minGridDistance = 50;

            // 创建 Y 轴
            var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

            // 创建系列
            var series = chart.series.push(new am4charts.LineSeries());
            series.dataFields.valueY = "value";
            series.dataFields.dateX = "date";
            series.tooltipText = "{value}";

            // 添加滚动条
            chart.scrollbarX = new am4core.Scrollbar();
            chart.scrollbarX.parent = chart.bottomAxesContainer;

            // 添加图表光标
            chart.cursor = new am4charts.XYCursor();
            chart.cursor.xAxis = dateAxis;
        });
    </script>
</body>
</html>