javascript - 使谷歌图表仪表板控件更大

Question

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

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

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

这是我为 slider 设置的:

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

这是一个 jsFiddle:here

Answer 1

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

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

CSS

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

js

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  */

---

请参阅以下工作代码段，您可以看到标签如何不遵循自定义类的颜色等...

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%)，那么您将不得不追踪父元素，并调整它们还有……