javascript - 无法使用谷歌图表适应模式窗口

Question

我想在按下按钮后显示带有谷歌图表的模态窗口。

但我的 is 总是看起来很丑而且不适合模态大小。

我想做的是增加模态的大小，增加图表的大小并将它们放在一起以美观。

这是我得到的结果，它看起来像:

这里是模态的 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">&times;</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);
}

Answer 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以获得更多选项并控制结果。