更改Google Chart中图表范围过滤器的值

Posted 2021-05-05

Picture

我有一个折线图的两个图表范围过滤器。

一个是日期，第二个是时间。

首先，我想从日期范围过滤器中选择日期，然后我希望其他图表范围滑块的值相对于第一个滑块更改。

或者我如何设置图表范围过滤器的“hAxis”值？

提前致谢。

  var controll = new google.visualization.ControlWrapper({
                controlType: 'ChartRangeFilter',
                containerId: 'control_div1',
                options: {

                    filterColumnIndex: 0,

                    ui: {
                        chartOptions: {
                            height: 50,
                            labelStacking: 'vertical',

                            chartArea: {
                                width: '80%',
                            },

                            'hAxis': { 'baselineColor': 'none', format: "dd MMM yyyy" }


                        }
                    }
                },
                state: {
                    range: {
                        start: new Date(2017, 5, 8, 20, 00, 00, 00),
                        end: new Date(2017, 5, 8, 20, 50, 00, 00)

                        //state: { lowValue: new Date(2017, 5, 5, 20, 00, 00, 00),
                        //    highValue: new Date(2017, 5, 13, 20, 50, 00, 00) }
                    }

                }
            });

第二个控制包装器跟随时间变化

var control = new google.visualization.ControlWrapper({
        controlType: 'ChartRangeFilter',
        containerId: 'control_div',
        options: {

            filterColumnIndex: 0,

            ui: {
                chartOptions: {
                    height: 50,

                    chartArea: {
                        width: '80%',
                    },

                    'hAxis': { 'baselineColor': 'none', format: " hh:mm:ss" }



                }
            }
        },


    });

答案

听第一个控件上的'statechange'事件，

然后使用state属性值来设置第二个范围

确保在设置状态后重新绘制控件...

google.visualization.events.addListener(controlDate, 'statechange', function () {
  var stateDate = controlDate.getState();
  controlTime.setState({
    range: {
      start: stateDate.range.start,
      end: stateDate.range.end
    }
  });
  controlTime.draw();
});

---

请参阅以下工作代码段...

google.charts.load('current', {
  callback: drawChart,
  packages: ['controls', 'corechart']
});

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'TimeStamp');
  data.addColumn('number', 'Value');
  data.addRow([new Date('05/03/2016 12:00:19'),  0]);
  data.addRow([new Date('05/03/2016 12:01:31'),  1]);
  data.addRow([new Date('05/03/2016 12:02:43'),  2]);
  data.addRow([new Date('05/03/2016 12:32:01'),  3]);
  data.addRow([new Date('05/03/2016 12:33:14'),  4]);
  data.addRow([new Date('06/03/2016 11:50:42'),  5]);
  data.addRow([new Date('06/03/2016 11:51:57'),  6]);
  data.addRow([new Date('06/03/2016 11:53:11'),  7]);
  data.addRow([new Date('06/03/2016 11:54:25'),  8]);
  data.addRow([new Date('06/03/2016 11:55:39'),  9]);
  data.addRow([new Date('07/03/2016 15:43:50'), 10]);
  data.addRow([new Date('07/03/2016 15:45:02'), 11]);
  data.addRow([new Date('07/03/2016 15:46:14'), 12]);
  data.addRow([new Date('07/03/2016 15:47:26'), 13]);

  var controlDate = new google.visualization.ControlWrapper({
    controlType: 'ChartRangeFilter',
    containerId: 'control-date',
    options: {
      filterColumnLabel: 'TimeStamp',
      ui: {
        chartOptions: {
          hAxis: {
            format: 'dd MMM yyyy'
          }
        }
      }
    }
  });

  google.visualization.events.addListener(controlDate, 'statechange', function () {
    var stateDate = controlDate.getState();
    controlTime.setState({
      range: {
        start: stateDate.range.start,
        end: stateDate.range.end
      }
    });
    controlTime.draw();
  });

  var controlTime = new google.visualization.ControlWrapper({
    controlType: 'ChartRangeFilter',
    containerId: 'control-time',
    options: {
      filterColumnLabel: 'TimeStamp',
      ui: {
        chartOptions: {
          hAxis: {
            format: 'hh:mm:ss'
          }
        }
      }
    }
  });

  var chart = new google.visualization.ChartWrapper({
    chartType: 'LineChart',
    containerId: 'chart-line'
  });

  var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));
  dash.bind([controlDate, controlTime], [chart]);
  dash.draw(data);
}

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

以上是关于更改Google Chart中图表范围过滤器的值的主要内容，如果未能解决你的问题，请参考以下文章

需要在Google Chart中检查多个变量（或隐藏未透过的值）

Storybook：更改控件的值不会重新呈现 Chart.js 画布

在Chart.js图表 中加载Google Analytics中的数据

更改使用 chart.js 创建的图表中的轴线颜色

Highcharts - redraw() 与新的 Highcharts.chart

Google Chart Api 利用日期时间值