我正在使用谷歌图表,并设置了一个带有折线图和日期滑块的仪表板。
这个工作非常好,但是有很多日期被绘制,因此很难准确地选择日期。
为了解决这个问题,我希望让滑块更长,以便跨越窗口的整个宽度,因为它只占用了大约25%的可用空间,但是我在api中看不到任何选项来执行此操作
这是我为滑块设置的:
var dateSlider = new google.visualization.ControlWrapper({
controlType: 'DateRangeFilter',
containerId: 'resendControl',
options: {
filterColumnLabel: 'Week',
width: ($(window).width())
}
});
这是一个jsFiddle:here
答案 0 :(得分: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);
}
&#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%
),那么您必须追踪父元素,并调整这些元素......