Question

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

这个工作非常好，但是有很多日期被绘制，因此很难准确地选择日期。

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

这是我为滑块设置的：

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是 - ＆gt; white-space: nowrap

不幸的是，实际控件的所有部分都不会遵循自定义类

中的样式

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

因此，为了使滑动控件更长，我们可以使用...

覆盖默认类

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

/*  default = 200px  */

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

＆＃13;

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);
}

＆＃13;

.filter-date {
  background-color: cyan;
  color: red;
  font-weight: bold;
  white-space: nowrap;
}

.filter-date .google-visualization-controls-slider-horizontal {
  width: 800px;
}

＆＃13;

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

＆＃13;

note ：如果您想尝试将宽度设为百分比（100%），那么您必须追踪父元素，并调整这些元素......

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

1 个答案: