Javascript Google图表API控制范围和snapToData问题

使用谷歌图表API和由测距仪控制的折线图。
我遇到了两个恼人的问题：

控件在设置为跟随的数据值之前和之后都有额外的空间，留下了控件可以滑动到的丑陋空间

我似乎无法使控件捕捉到数据值 如果你能告诉我我做错了什么，我将非常感激。
我在这里设置了一个JSfiddle:

多谢各位

JS HTML

调试范围：Init

数据值前后的空格是将范围过滤器图表的域轴设置为轴0的结果，轴0是“字符串”类型的轴。如果希望行沿边到边移动，域轴必须是连续数据类型（“number”、“date”、“datetime”、“timeofday”）。如果将控件的图表的

视图.columns

参数更改为

[1,2]

，空格将消失：

var control1 = new google.visualization.ControlWrapper({
    controlType: 'ChartRangeFilter',
    containerId: 'control_activity',
    options: {
        filterColumnIndex: 1,
        ui: {
            chartType: 'LineChart',
            snapToData: true, // this bugger is not working
            chartOptions: {
                width: 950,
                height: 50,
                chartArea: {
                    left: 40,
                    top: 0,
                    width: 700,
                    height: 50
                },
                hAxis: {
                    textPosition: 'none'
                }
            },
            chartView: {
                columns: [1, 2]
            },
                minRangeSize: 1
        }
    },
    state: {
        range: {
            start: 7,
            end: 8
        }
    }
});

我无法使用

ui.snapToData

选项复制您的问题

---

更新了JSFIDLE，并进行了修复：

将第67行更改为：

'columns': [1, 2]

---

jsFiddle:

非常感谢！关于snapToData，没有可复制的内容，下面的调试显示了问题（或者我对该属性的误解）。如果我理解正确，增量应该是1，这意味着调试应该显示整数而不是浮点数。你能给出建议吗？当滑块运动时，如果不遍历中间的点（在调试中显示），就无法使它从一个数据点移动到下一个数据点。我认为为了实现这样一个系统，滑块必须是“粘性的”；也就是说，端点将粘在数据点上，用户必须将滑块拖得足够远，以使端点从当前数据点上松开并粘到下一个数据点上。我认为这将是对滑块的非直观使用，可能会让用户感到沮丧。如果您对获取控件的状态感兴趣，并且不想处理处于数据点之间的状态，请检查事件的

inProgress

参数，如果为真，则滑块处于运动状态，因此可以忽略它。下面是它将如何影响您的调试：您在第二条评论中理解了我的意图，并且当场完成了！非常感谢你的帮助。我必须根据第一响应者进行评分，但我感谢您的时间。

var control1 = new google.visualization.ControlWrapper({
    controlType: 'ChartRangeFilter',
    containerId: 'control_activity',
    options: {
        filterColumnIndex: 1,
        ui: {
            chartType: 'LineChart',
            snapToData: true, // this bugger is not working
            chartOptions: {
                width: 950,
                height: 50,
                chartArea: {
                    left: 40,
                    top: 0,
                    width: 700,
                    height: 50
                },
                hAxis: {
                    textPosition: 'none'
                }
            },
            chartView: {
                columns: [1, 2]
            },
                minRangeSize: 1
        }
    },
    state: {
        range: {
            start: 7,
            end: 8
        }
    }
});

'columns': [1, 2]