Google visualization NumberArrangeFilter在谷歌图表中的小数行为异常

我很难让谷歌图表的NumberArrangeFilter控件很好地处理小数。为了说明这个问题，我将示例从中修改为有五个数据点，其中一些是小数点。我还将NumberArrangeFilter的step属性设置为以0.1的增量移动

var control = new google.visualization.ControlWrapper({
  'controlType': 'NumberRangeFilter',
  'containerId': 'numberRangeFilter_control_div',
  'options': {
    'filterColumnIndex': 1,
    'ui':{
        'showRangeValues':true,
        'step':0.1
    }

  }
});

var data = google.visualization.arrayToDataTable([
  ['Name', 'Age'],
  ['Robert', 7.0],
  ['John', 7.5],
  ['Aaron', 8.0],
  ['Aaron', 8.3],
  ['Jessica', 8.7]
]);

我希望滑块从包含的所有数据开始，以0.1的增量移动，并在调整范围时过滤掉数据点

然而，我看到了两种意想不到的行为：

1） 移动“最大范围”滑块时，过滤器范围标签不会正确更新。最大范围标签显示为8.7，即使我将其向左滑动三步。它会按预期过滤掉数据，但标签不会更新，因此它会继续读取8.7

2） 范围最小值上的标签不包括最低数据点，尽管在图形上显示了该条：

在处理谷歌图表中的小数之前，有人见过这个吗？我做错什么了吗

全文如下：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<div id="numberRangeFilter_dashboard_div" style="border: 1px solid #ccc">
<p>&nbsp;</p>
  <table class="columns">
    <tr>
      <td>
        <div id="numberRangeFilter_control_div" style="padding-left: 2em"></div>
      </td>
      <td>
        <div id="numberRangeFilter_chart_div"></div>
      </td>
    </tr>
  </table>
</div>

<script type="text/javascript">
  google.charts.load('current', {packages:['corechart', 'table', 'gauge', 'controls']});
  google.charts.setOnLoadCallback(drawNumberRangeFilter);

  function drawNumberRangeFilter() {
    var dashboard = new google.visualization.Dashboard(
        document.getElementById('numberRangeFilter_dashboard_div'));

    var control = new google.visualization.ControlWrapper({
      'controlType': 'NumberRangeFilter',
      'containerId': 'numberRangeFilter_control_div',
      'options': {
        'filterColumnIndex': 1,
        'ui':{
            'showRangeValues':true,
            'step':0.1
        }

      }
    });

    var data = google.visualization.arrayToDataTable([
      ['Name', 'Age'],
      ['Robert', 7.0],
      ['John', 7.5],
      ['Aaron', 8.0],
      ['Aaron', 8.3],
      ['Jessica', 8.7]
    ]);


    var chart = new google.visualization.ChartWrapper({
      'chartType': 'BarChart',
      'containerId': 'numberRangeFilter_chart_div',
      'options': {
        'width': 400,
        'height': 300,
        'hAxis': {'minValue': 0, 'maxValue': 60},
        'chartArea': {top: 0, right: 0, bottom: 0}
      }
    });



    dashboard.bind(control, chart);
    dashboard.draw(data);

  }
</script>

load（'current'，{packages:['corechart'，'table'，'gauge'，'controls']}）；
google.charts.setOnLoadCallback（DrawNumberArrangeFilter）；
函数DrawNumberArrangeFilter（）{
var dashboard=new google.visualization.dashboard(
document.getElementById（'numberArrangeFilter_dashboard_div'）；
var control=new google.visualization.ControlWrapper({
“controlType”：“NumberArrangeFilter”，
“containerId”：“numberArrangeFilter\u control\u div”，
“选项”：{
“filterColumnIndex”：1，
“用户界面”：{
“showRangeValues”：正确，
“步骤”：0.1
}
}
});
var data=google.visualization.arrayToDataTable([
[‘姓名’、‘年龄’]，
['Robert'，7.0]，
[John'，7.5]，
[Aaron'，8.0]，
[Aaron'，8.3]，
[《杰西卡》，8.7]
]);
var chart=new google.visualization.ChartWrapper({
“图表类型”：“条形图”，
“containerId”：“NumberArrangeFilter\u chart\u div”，
“选项”：{
“宽度”：400，
‘高度’：300，
'hAxis'：{'minValue'：0，'maxValue'：60}，
'chartArea'：{top:0，right:0，bottom:0}
}
});
仪表板绑定（控件、图表）；
仪表盘.绘图（数据）；
}

解决方法：使用statechange事件在页面上显示NumberArrangeFilter控制器的真实选定范围，并在每次触发事件时在页面上修改html。使用这些新的文本div代替标准的NumberArrangeFilter标签

很笨拙，但对我来说很有用

google.visualization.events.addListener(control, 'statechange', selectHandler);
function selectHandler(e) {
  var range_selected = control.getState()
  document.getElementById("lower_range_label").innerHTML = "Lower Range:"+range_selected.lowValue
  document.getElementById("upper_range_label").innerHTML = "Upper Range:"+range_selected.highValue
}

---

解决方法：使用statechange事件在页面上显示NumberArrangeFilter控制器的真实选定范围，并在每次触发事件时在页面上修改html。使用这些新的文本div代替标准的NumberArrangeFilter标签

很笨拙，但对我来说很有用

google.visualization.events.addListener(control, 'statechange', selectHandler);
function selectHandler(e) {
  var range_selected = control.getState()
  document.getElementById("lower_range_label").innerHTML = "Lower Range:"+range_selected.lowValue
  document.getElementById("upper_range_label").innerHTML = "Upper Range:"+range_selected.highValue
}