我想在按下按钮后显示带有Google图表的模式窗口。
但是我总是很丑陋,不适合模态尺寸。
我想要做的是增加模态的大小,增加图表的大小,并将它们放在一起以获得美观。
以下是用于模式的html:
<button id="getChart" type="submit" class="btn btn-outline-info" data-toggle="modal" data-target="#exampleModalCenter"> Result</button>
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="chart" id="chart_div"></div>
</div>
<div class="modal-footer">
<div id='png'></div>
</div>
</div>
</div>
</div>
以下是CSS样式:
.chart {
align-content: center;
display: flex;
justify-content: center;
}
.modal {
text-align: center;
}
@media screen and (min-width: 768px) {
.modal:before {
content: " ";
display: inline-block;
height: 100%;
vertical-align: middle;
}
}
.modal-dialog {
display: inline-block;
text-align: center;
vertical-align: middle;
}
.modal-footer {
color: #00b5e6;
font-size: 25px;
text-align: center;
}
和js代码:
$('#getChart').click(getCheckboxesValues);
google.charts.load('current', {'packages':['corechart']});
function drawChart() {
var data = google.visualization.arrayToDataTable(chartObject);
var options = {
title: 'Company Performance',
curveType: 'none',
legend: {position: 'bottom'}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
// The select handler. Call the chart's getSelection() method
function selectHandler() {
var selectedItem = chart.getSelection()[0];
if (selectedItem) {
var task = data.getValue(selectedItem.row, 0);
alert('The user selected ' + task);
}
}
google.visualization.events.addListener(chart, 'select', selectHandler);
chart.draw(data, options);
}
答案 0 :(得分:1)
您应该使用实际的date
(而不是字符串)作为数据键,并使用format: 'YYYY-MM-dd'
正确设置图表的日期格式。
检查此:
google.visualization.arrayToDataTable([
['date', 'speedKpi'],
[new Date('2018-10-01T00:00:00.000Z'), 66.60145829628313],
[new Date('2018-10-02T00:00:00.000Z'), 329.1959406713505],
[new Date('2018-10-03T00:00:00.000Z'), 0.0],
[new Date('2018-10-04T00:00:00.000Z'), 0.0],
[new Date('2018-10-05T00:00:00.000Z'), 0.0],
[new Date('2018-10-06T00:00:00.000Z'), 0.0],
[new Date('2018-10-07T00:00:00.000Z'), 0.0],
[new Date('2018-10-08T00:00:00.000Z'), 0.0],
[new Date('2018-10-09T00:00:00.000Z'), 0.0],
[new Date('2018-10-10T00:00:00.000Z'), 0.0],
[new Date('2018-10-11T00:00:00.000Z'), 0.0],
[new Date('2018-10-12T00:00:00.000Z'), 0.0],
[new Date('2018-10-13T00:00:00.000Z'), 0.0],
[new Date('2018-10-14T00:00:00.000Z'), 0.0],
[new Date('2018-10-15T00:00:00.000Z'), 0.0],
[new Date('2018-10-16T00:00:00.000Z'), 72.62773722627736],
[new Date('2018-10-17T00:00:00.000Z'), 0.0],
[new Date('2018-10-18T00:00:00.000Z'), 0.0],
[new Date('2018-10-19T00:00:00.000Z'), 0.0],
[new Date('2018-10-20T00:00:00.000Z'), 0.0],
[new Date('2018-10-21T00:00:00.000Z'), 0.0],
[new Date('2018-10-22T00:00:00.000Z'), 0.0],
[new Date('2018-10-23T00:00:00.000Z'), 0.0],
[new Date('2018-10-24T00:00:00.000Z'), 0.0],
[new Date('2018-10-25T00:00:00.000Z'), 0.0],
[new Date('2018-10-26T00:00:00.000Z'), 0.0]
]);
...
var options = {
title: 'Company Performance',
curveType: 'none',
legend: { position: 'bottom' }, hAxis: { format: 'YYYY-MM-dd' }
};
编辑:
此外,您可以使用slantedText
选项稍微旋转一下按键,这样您就可以看到它们:
hAxis: {slantedText: true}
此处总结:https://codepen.io/extempl/pen/aRXvLY
还请检查Documentation以获得更多选项并控制结果。