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

我正在使用谷歌图表，并设置了一个仪表板与折线图和日期滑块。使谷歌图表仪表板控制更大

这工作绝对好，但有不少日期绘制，所以它很难准确选择日期。

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

这是我设置了滑块：

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

这里是一个的jsfiddle：here

来源

2017-04-21 Ryan

该死的，我找不到任何东西...... – ZombieChowder

我想，也许我可以使用'ui.cssClass'选项，只是自己做，但我不'不知道任何o f类或ID – Ryan

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

见下工作片段，您可以看到标签不按自定义类等的颜色ç...

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%），那么你就必须追查父元素，并调整这些以及...

来源

2017-04-21 16:30:16 WhiteHat

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

回答

相关问题