使谷歌圖表儀表板控制更大

我正在使用谷歌圖表，並設置了一個儀表板與折線圖和日期滑塊。使谷歌圖表儀表板控制更大

這工作絕對好，但有不少日期繪製，所以它很難準確選擇日期。

爲了解決這個問題，我希望使滑塊更長，以至於跨越窗口的整個寬度，因爲它只佔用大約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

使谷歌圖表儀表板控制更大

回答

相關問題