Question

我使用的是Google图表的ChartRangeFilter。我想将滑块范围限制为特定值，并防止用户更改它（防止用户将最小值和最大值之间的范围值增大，但是他可以滑动整个范围。有什么方法可以实现吗？非常感谢您的帮助。

Answer 1

没有任何标准选项可以通过这种方式限制范围

但您可以在过滤器上监听'statechange'事件，
当达到范围的最大值/最小值时，
使用setState方法覆盖开始/结束值，
并重新绘制控件

请参阅以下工作片段，
开始不能移到3以上，
末端不能移到6

google.charts.load('current', {
  packages: ['controls', 'corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y0', 'y1', 'y2'],
    [0, 3.0, 5, 4.9],
    [1, 3.1, 5, 4.8],
    [2, 3.2, 5, 4.7],
    [3, 3.3, 5, 4.6],
    [4, 3.4, 5, 4.5],
    [5, 3.5, 5, 4.4],
    [6, 3.6, 5, 4.3],
    [7, 3.7, 5, 4.2],
    [8, 3.8, 5, 4.1],
    [9, 3.9, 5, 4.0],
  ]);

  var chart = new google.visualization.ChartWrapper({
    chartType: 'LineChart',
    containerId: 'chart'
  });
  var control = new google.visualization.ControlWrapper({
    controlType: 'ChartRangeFilter',
    containerId: 'control',
    options: {
      filterColumnIndex: 0,
      ui: {
        chartOptions: {
          hAxis: {
            ticks: data.getDistinctValues(0)
          }
        }
      }
    }
  });
  var dashboard = new google.visualization.Dashboard(
    document.getElementById('dashboard')
  );

  google.visualization.events.addListener(control, 'statechange', function (e) {
    var maxStart = 3;
    var minEnd = 6;

    var filterState = control.getState();
    var restrict = false;

    if (e.startChanged) {
      if ((filterState.range.start) > maxStart) {
        filterState.range.start = maxStart;
        restrict = true;
      }
    }
    if (e.endChanged) {
      if ((filterState.range.end) < minEnd) {
        filterState.range.end = minEnd;
        restrict = true;
      }
    }

    if (restrict) {
      control.setState(filterState);
      control.draw();
    }
  });

  dashboard.bind(control, chart);
  dashboard.draw(data);
  window.addEventListener('resize', function () {
    dashboard.draw(data);
  });
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="dashboard">
  <div id="chart"></div>
  <div id="control"></div>
</div>

这种方法的唯一缺点，
重新绘制控件时，用户将无法握住手柄。

限制ChartRangeFilter中的滑块范围：Google图表

1 个答案: