NumberRangeFilter 在 Google 图表中使用小数时表现异常

Question

我无法让 google 图表的 numberRangeFilter 控件很好地处理小数。为了说明问题，我修改了 docs 中的示例，使其具有五个数据点，其中一些带有小数点。我还将 numberRangeFilter 的步长属性设置为以 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.image of slider label behavior

2) 尽管在图表上显示了该条，但范围最小值上的标签不包括最低数据点： image of nonsensical range

有没有人在处理 google 图表中的小数点之前看到过这个？我做错了什么吗？

完整脚本如下：

<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>

Answer 1

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

笨拙，但对我有用。

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
}

NumberRangeFilter 在 Google 图表中使用小数时表现异常

NumberRangeFilter behaves strangely with decimals in Google Charts

google-visualization