Question

enter image description here我想通过使用图表范围过滤器滑块来移动图表。我觉得屏幕上有一个播放按钮。当我按下播放按钮时，固定一到两分钟范围的范围滑块会以特定的时间间隔移动。我将与您分享我的代码。我想要仿真这样的东西。

   var chart = new google.visualization.ChartWrapper({
        chartType: 'LineChart',
        containerId: 'chart_div',
        options: {
            //title: 'Phase 1 -Tower 44',

            hAxis: {
                format: ' yyyy-MMM-dd  hh:mm',
                title: 'Time',
                textStyle: {
                    color: 'black',
                    fontSize: 10,
                    fontName: 'Arial',
                    bold: false,
                    italic: false
                },
                gridlines: { color: 'grey' },
                titleTextStyle: {
                    color: 'black',
                    fontSize: 10,
                    fontName: 'Arial',
                    bold: true,
                    italic: false
                }
            },

            vAxes: {
                0: {

                    viewWindowMode: 'explicit',
                    title: 'Line Current  (A)',
                    textStyle: { color: '#ED0A0A' },
                    titleTextStyle: {
                        color: 'ED0A0A'
                    },

                    viewWindow: {
                        min: 0,
                        max: 700


                    },
                    ticks: [0, 100, 200, 300, 400, 500, 600, 700],
                    gridlines: { color: 'transparent' }
                },
                1: {


                    title: 'Line Temperature  (°C)',
                    textStyle: { color: '#004BA5' },
                    gridlines: { color: 'grey' },
                    viewWindow: {
                        min: 0,
                        max: 500

                    },

                    ticks: [0, 50, 100, 150, 200, 250, 300, 350, 400, 450, 500],
                    titleTextStyle: {
                        color: '#004BA5'
                    }
                }
            },
            series: {
                0: { targetAxisIndex: 0 },
                1: { targetAxisIndex: 1 }

            },

            chartArea: {


                width: '85%',
                height: 500
            },

            //lineWidth: 3,
            //lineDashStyle: [1, 2, 2],
            'width': '85%',
            'height': 620,
            curveType: 'function',

            colors: ['#ED0A0A', '#004BA5', '#EDB80F'],
            legend: {
                position: 'none',

            },


            pointsVisible: true


        }
    });

然后我的控件包装代码在

下面

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

            filterColumnIndex: 0,

            ui: {
                chartOptions: {
                    height: 40,

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

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

                    //      , 'gridlines': { 'color': 'none' }

                }
            }
        },

    });

播放按钮点击事件是这样的......

   $("#play").click(function () {        

    setInterval(function () {



        var state = stateStatus.getState();           


        control.setOption('ui.chartOptions.hAxis.viewWindow.min', state.range.start);
        control.setOption('ui.chartOptions.hAxis.viewWindow.max', state.range.end);


        control.setState(controll.getState());

        control.draw();


    }, 500);

Answer 1

请参阅以下工作代码段中的drawDateRange ...

google.charts.load('current', {
  callback: function () {
    drawChart();
    $(window).resize(drawChart);
  },
  packages: ['controls', 'corechart']
});


function drawChart() {
  var oneDay = (1000 * 60 * 60 * 24);
  var oneWeek = (oneDay * 7);
  var startDate = new Date(2017, 0, 1);
  var endDate = new Date();

  var data = new google.visualization.DataTable();
  data.addColumn('date', 'TimeStamp');
  data.addColumn('number', 'Value');
  for (var i = startDate.getTime(); i < endDate.getTime(); i = i + oneDay) {
    data.addRow([
      new Date(i),
      (2 * ((i - startDate.getTime()) / oneDay) + 8)  // y = 2x + 8
    ]);
  }

  var controlDate = new google.visualization.ControlWrapper({
    controlType: 'ChartRangeFilter',
    containerId: 'control-date',
    options: {
      filterColumnLabel: 'TimeStamp',
      ui: {
        chartOptions: {
          hAxis: {
            format: 'dd MMM yyyy'
          }
        }
      }
    }
  });

  function drawDateRange(rangeStart) {
    var drawAgain = true;
    var rangeEnd = new Date(rangeStart.getTime() + oneWeek);
    if (rangeEnd.getTime() > endDate.getTime()) {
      rangeEnd = endDate;
      drawAgain = false;
    }

    controlDate.setState({
      range: {
        start: rangeStart,
        end: rangeEnd
      }
    });
    controlDate.draw();

    if (drawAgain) {
      setTimeout(function () {
        drawDateRange(rangeEnd);
      }, 200);
    } else {
      setTimeout(function () {
        controlDate.setState({});
        controlDate.draw();
      }, 200);
    }
  }

  function drawTimeRange() {
    var state = controlDate.getState();
    controlTime.setState({
      range: {
        start: state.range.start,
        end: state.range.end
      }
    });
    controlTime.draw();
  }

  $("#play").click(function () {
    drawDateRange(startDate);
  });

  google.visualization.events.addListener(controlDate, 'ready', drawTimeRange);
  google.visualization.events.addListener(controlDate, 'statechange', drawTimeRange);

  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://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
  <button id="play">Play</button>
  <div id="control-date"></div>
  <div id="chart-line"></div>
  <div id="control-time"></div>
</div>

通过在几秒钟之后移动其图表范围滑块来模拟Google图表

1 个答案: