Question

我正面临谷歌图表中的错误（或功能），当只有一个或两个条目时，图表会以奇怪的方式显示hAxis中的日期标签。我在网上发现了一个存在相同错误的演示：

https://blog.smalldo.gs/2013/04/google-chart-tools-walkthrough-part-3/#create-dashboard

要重现，请缩小图表范围滑块，除非图表上只有一个条目。它不显示日期，而只显示10年的步数。有没有办法修改它或做任何解决方法，以便正确显示日期？

Answer 1

默认情况下，图表将根据图表的数据和大小创建轴标签当只有一行数据时，它不确定轴范围应该是什么，
并添加年份标签，以填补图表底部的空间

要阻止此行为，请为min选项设置max和hAxis.viewWindow值

在这种情况下，每次范围过滤器更改时，视图窗口都应该更改

这样，断开折线图与仪表板的连接当表格图表的'ready'事件触发时，
使用表格图表中的过滤数据表来绘制折线图

您可以使用数据表方法getColumnRange来确定viewWindow

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

google.charts.load('current', {
  packages: ['controls']
}).then(function () {
  var myData = new google.visualization.DataTable();
  myData.addColumn('date', 'Date');
  myData.addColumn('number', 'Hours Worked');
  myData.addRows([
    [new Date(2014, 6, 12), 9],
    [new Date(2014, 6, 13), 8],
    [new Date(2014, 6, 14), 10],
    [new Date(2014, 6, 15), 8],
    [new Date(2014, 6, 16), 0]
  ]);

  var dash_container = document.getElementById('dashboard_div'),
    myDashboard = new google.visualization.Dashboard(dash_container);

  var myDateSlider = new google.visualization.ControlWrapper({
    controlType: 'ChartRangeFilter',
    containerId: 'control_div',
    options: {
      filterColumnLabel: 'Date'
    }
  });

  var myTable = new google.visualization.ChartWrapper({
    chartType : 'Table',
    containerId : 'table_div'
  });
  google.visualization.events.addListener(myTable, 'ready', drawLine);

  var myLine = new google.visualization.ChartWrapper({
    chartType : 'LineChart',
    containerId : 'line_div'
  });

  myDashboard.bind(myDateSlider, myTable);
  myDashboard.draw(myData);

  function drawLine() {
    var dataTable = myTable.getDataTable();
    var dateRange = dataTable.getColumnRange(0);
    var xTicks = dataTable.getDistinctValues(0);
    myLine.setDataTable(dataTable);
    myLine.setOption('hAxis.ticks', xTicks);
    myLine.setOption('hAxis.viewWindow.min', dateRange.min);
    myLine.setOption('hAxis.viewWindow.max', dateRange.max);
    myLine.draw();
  }
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard_div">
  <div id="control_div"></div>
  <div id="line_div"></div>
  <div id="table_div"></div>
</div>

谷歌在单一条目给出时会出现haxis错误

1 个答案: