使谷歌图表仪表板控件更大答案

【问题标题】：Make google chart dashboard controls larger使谷歌图表仪表板控件更大
【发布时间】：2017-04-22 00:30:16
【问题描述】：

我正在使用谷歌图表，并设置了一个带有折线图和日期滑块的仪表板。

这绝对没问题，但是绘制的日期很多，因此很难准确选择日期。

为了解决这个问题，我希望使滑块更长，以便跨越窗口的整个宽度，因为它只使用了大约 25% 的可用空间，但是我在 api 中看不到任何选项来执行此操作.

这是我为滑块设置的：

var dateSlider = new google.visualization.ControlWrapper({
            controlType: 'DateRangeFilter',
            containerId: 'resendControl',
            options: {
                filterColumnLabel: 'Week',
                width: ($(window).width())
            }
        });

这是一个 jsFiddle：here

【问题讨论】：

该死的，我也找不到任何东西......
我想也许我可以使用 ui.cssClass 选项并自己制作，但我不知道任何类或 ID

标签： javascript google-visualization

【解决方案1】：

ui.cssClass 只允许您替换赋予控件容器的默认类

它是如何工作的，在css中创建一个类，并将其分配给属性...

css

.filter-date {
  background-color: cyan;
  color: red;
  font-weight: bold;
  white-space: nowrap;
}

var filterDate = new google.visualization.ControlWrapper({
  controlType: 'DateRangeFilter',
  containerId: 'filter-date',
  options: {
    filterColumnLabel: 'Date',
    ui: {
      // assign custom class
      cssClass: 'filter-date'
    }
  }
});

生成的容器将具有自定义类而不是默认类...

google-visualization-controls-rangefilter

这个默认类提供的唯一实际 css 是 --> white-space: nowrap

遗憾的是，并非所有实际控件的点点滴滴都会遵循自定义类中放置的样式

相反，您必须检查元素并找到需要覆盖的类

因此，为了使滑动控件更长，我们可以使用...覆盖默认类

.filter-date .google-visualization-controls-slider-horizontal {
  width: 800px;  
}

/*  default = 200px  */

查看以下工作 sn-p，您可以看到标签如何不遵循自定义类的颜色等...

google.charts.load('current', {
  callback: function () {
    drawChart();
    window.addEventListener('resize', drawChart, false);
  },
  packages:['controls']
});

function drawChart() {
  var formatDate = new google.visualization.DateFormat({
    pattern: 'dd/MM'
  });

  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn('date', 'Date');
  dataTable.addColumn('number', 'Value');

  var oneDay = (1000 * 60 * 60 * 24);
  var startDate = new Date(2017, 0, 16);
  var endDate = new Date();
  var ticksAxisH = [];
  for (var i = startDate.getTime(); i < endDate.getTime(); i = i + oneDay) {
    // set x value
    var rowDate = new Date(i);
    var xValue = {
      v: rowDate,
      f: formatDate.formatValue(rowDate)
    };

    // set y value (y = 2x + 8)
    var yValue = (2 * ((i - startDate.getTime()) / oneDay) + 8);

    // add data row
    dataTable.addRow([
      xValue,
      yValue
    ]);

    // add tick every 7 days
    if (((i - startDate.getTime()) % 7) === 0) {
      ticksAxisH.push(xValue);
    }
  }

  var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));

    var filterDate = new google.visualization.ControlWrapper({
      controlType: 'DateRangeFilter',
      containerId: 'filter-date',
      options: {
        filterColumnLabel: 'Date',
        ui: {
          cssClass: 'filter-date'
        }
      }
    });

  var chartColumn = new google.visualization.ChartWrapper({
    chartType: 'ColumnChart',
    containerId: 'chart-column',
    options: {
      theme: 'material',
      legend: {
        position: 'bottom',
      },
      chartArea: {
        top: 12,
        right: 12,
        bottom: 48,
        left: 48,
        height: '100%',
        width: '100%'
      },
      hAxis: {
        format: 'dd/MM',
        ticks: ticksAxisH
      }
    }
  });

  dashboard.bind(filterDate, chartColumn);
  dashboard.draw(dataTable);
}

.filter-date {
  background-color: cyan;
  color: red;
  font-weight: bold;
  white-space: nowrap;
}

.filter-date .google-visualization-controls-slider-horizontal {
  width: 800px;
}

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

注意：如果您想尝试将宽度设置为百分比 (100%)，那么您必须跟踪父元素，并同时调整它们...

【讨论】：