Question

我正在尝试将图表的可视化设置为最多显示4个月，并且可以水平滚动。

我试图设置一些像hAxis这样的属性，但是当我设置它时，页面重新回复了一个错误“a.getTime不是函数”。

另一个问题是选择缩放和水平滚动仅适用于Chrome桌面，但不适用于Android webview。

    <html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

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

<script type="text/javascript">

// Load the Visualization API and the corechart package.
google.charts.load('current', {
  'packages' : [ 'corechart', 'controls' ]
});

// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);


//RAW Data
var jsonString = '[[\"F1\",\"F2\",\"F3\"],[\"Gennaio\",10.0,11.0,22.0],[\"Febbraio\",5.0,15.0,20.0],[\"Marzo\",7.0,17.0,15.0],[\"Aprile\",7.0,17.0,15.0],[\"Maggio\",7.0,17.0,15.0],[\"Giugno\",7.0,17.0,15.0],[\"Luglio\",7.0,17.0,15.0],[\"Agosto\",7.0,17.0,15.0],[\"Settembre\",7.0,17.0,15.0],[\"Ottobre\",7.0,17.0,15.0]]';


// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart(){

    // Create the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Months');
    data.addColumn('number', 'Consumption');
    data.addColumn('number', 'Consumption_2');
    data.addRows([
        [ new Date(2017, 0, 1), 3, 5 ],
        [ new Date(2017, 1, 1), 4, 5 ],
        [ new Date(2017, 2, 1), 5, 5 ],
        [ new Date(2017, 3, 1), 6, 6 ],
        [ new Date(2017, 4, 1), 8, 7 ],
        [ new Date(2017, 5, 1), 3, 5 ],
        [ new Date(2017, 6, 1), 4, 5 ],
        [ new Date(2017, 7, 1), 5, 5 ],
        [ new Date(2017, 8, 1), 6, 6 ],
        [ new Date(2017, 9, 1), 8, 7 ],
        [ new Date(2017, 10, 1), 3, 5 ],
        [ new Date(2017, 11, 1), 4, 5 ],
        [ new Date(2018, 0, 1), 5, 5 ],
        [ new Date(2018, 1, 1), 6, 6 ],
        [ new Date(2018, 2, 1), 8, 7 ]
    ]);

      //OPTIONS
      var options = {
          'title': 'prova assi tempo',
          isStacked: true,
          'explorer': {
            axis: 'horizontal'
          },
          'animation': {
            duration: 500,
            easing: 'in',
            startup:true
          }
          // 'vAxis': {
          //   'viewWindow': {max: 4}
          // }
          // 'hAxis': {
          //   viewWindowMode: 'explicit',
          //   viewWindow: {
          //     max: 4
          //   }
          // }
          // 'hAxis': {
          //   'viewWindow': {
          //     max: 3
          //   }
          // }
      };


      var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));

      chart.draw(data, options);

}

</script>

<body>

    <div id="chart_div"></div>

</body>

</html>

Answer 1

viewWindow.min和max的值应与轴上的值具有相同的类型，
在这种情况下，'date'

hAxis

e.g。

hAxis: {
  viewWindow: {
    min: new Date(2017, 0, 1),
    max: new Date(2017, 3, 1)
  }
}

另一种选择是使用带有范围过滤器的仪表板（ChartRangeFilter）

请参阅以下工作片段，
在这里，在过滤器上设置range.start和end ...

google.charts.load('current', {
  packages: ['controls', 'corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Months');
  data.addColumn('number', 'Consumption');
  data.addColumn('number', 'Consumption_2');
  data.addRows([
    [ new Date(2017, 0, 1), 3, 5 ],
    [ new Date(2017, 1, 1), 4, 5 ],
    [ new Date(2017, 2, 1), 5, 5 ],
    [ new Date(2017, 3, 1), 6, 6 ],
    [ new Date(2017, 4, 1), 8, 7 ],
    [ new Date(2017, 5, 1), 3, 5 ],
    [ new Date(2017, 6, 1), 4, 5 ],
    [ new Date(2017, 7, 1), 5, 5 ],
    [ new Date(2017, 8, 1), 6, 6 ],
    [ new Date(2017, 9, 1), 8, 7 ],
    [ new Date(2017, 10, 1), 3, 5 ],
    [ new Date(2017, 11, 1), 4, 5 ],
    [ new Date(2018, 0, 1), 5, 5 ],
    [ new Date(2018, 1, 1), 6, 6 ],
    [ new Date(2018, 2, 1), 8, 7 ]
  ]);

  var rangeFilter = new google.visualization.ControlWrapper({
    controlType: 'ChartRangeFilter',
    containerId: 'filter-range',
    options: {
      filterColumnIndex: 0,
      ui: {
        chartType: 'ComboChart',
        chartOptions: {
          chartArea: {
            width: '100%',
            left: 36,
            right: 18
          },
          height: 72,
          isStacked: true,
          seriesType: 'bars'
        }
      }
    },
    state: {
      range: {
        start: new Date(2017, 0, 1),
        end: new Date(2017, 3, 1)
      }
    }
  });

  var chart = new google.visualization.ChartWrapper({
    chartType: 'ColumnChart',
    containerId: 'chart-column',
    options: {
      title: 'prova assi tempo',
      isStacked: true,
      explorer: {
        axis: 'horizontal'
      },
      legend: {
        alignment: 'end',
        position: 'top'
      },
      animation: {
        duration: 500,
        easing: 'in',
        startup:true
      },
      chartArea: {
        height: '100%',
        width: '100%',
        top: 36,
        left: 36,
        right: 18,
        bottom: 36
      }
    }
  });

  var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
  dashboard.bind(rangeFilter, chart);
  dashboard.draw(data);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
  <div id="chart-column"></div>
  <div id="filter-range"></div>
</div>

谷歌图表水平滚动

1 个答案: