Question

Graph Image

这是条形图的最终形状。我在滚动上挣扎。到目前为止，我已经尝试过使用Google Chart ChartRangeFilter在桌面版本上运行良好，但不幸的是，谷歌未提供移动版的Google信息中心，滑块无法在移动版上运行，但它绘制了图形。再加上上图中的另一件事，我在haxis上使用字符串，而ChartRangeFilter使用数字或日期来实现外观。请帮助添加滚动条。

google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawTrendlines);

function drawTrendlines() {
      var data = new google.visualization.DataTable();
      //data.addColumn('timeofday', 'Time of Day');
      data.addColumn('string', 'Time of Day');
      data.addColumn('number', 'Time-in');
      data.addColumn('number', 'Time-out');

      data.addRows([
        ['09:00\n09:30', 20, 18],
        ['09:30\n10:00', 5, 2],
        ['10:00\n10:30', 3, 30],
        ['10:30\n11:00', 3, 30],
        ['11:00\n11:30', 3, 30],
        ['11:30\n12:00', 10, 11],
        ['12:00\n12:30', 10, 11],
        ["12:30\n01:00", 13, 14],
        ["01:00\n01:30", 13, 14],
        ["01:30\n02:00", 20, 15],
        ["02:00\n02:30", 23, 1],
        ["02:30\n03:00", 23, 1],
        ["03:00\n03:30", 23, 1],
        ["03:30\n04:00", 1, 30],
        ["04:00\n04:30", 1, 30],
        ["04:30\n05:00", 0, 3],
        ["05:00\n05:30", 0, 3],
        ["05:30\n06:00", 3, 3],
      ]);
    var options = {
    chartArea : {right: '30', left: '40', top: '20', bottom:"50", width:'100%', height:'100%' },
    curveType: 'function',
    legend: 'none',
    height: 'auto',
    width: 'auto',
    colors: ['#1bbb26', '#bb1b1b'],
    interpolateNulls: true,
    explorer: {axis: 'horizontal'},

    hAxis: {
      showTextEvery:2,
      textStyle : {
        fontSize: 8, // or the number you want
        fontName: "OpenSans-bold",
      },
      labels: {
        overflow: 'justify'
      }
    },
    vAxis: {
         title: 'Number of employees'
    }
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data, options);

这是我用来获得所需外观的简单的Google条形图代码。

谷歌仪表板滚动不适用于移动

0 个答案: