Question

我在几个内容之后在特定页面上使用了谷歌图表。但随着谷歌图表中行（数据）的数量增加，内容和图表之间的空间也会增加。我试图修改高度，但没有结果。

这是我的代码 -

function drawChart() {
    var data = new google.visualization.DataTable();
        data.addColumn('string', 'Projects');
        data.addColumn('number', 'Hours');
        var monthData = jQuery(".slick-active").html();
        var monthTemp = monthData.toString().split(" ");
        var month = getMonthFromString(monthTemp[0]);
        var year = monthTemp[1];
        var tag = $("#tagVal").val();
        var jsonData = jQuery.ajax({
        url: "/report/additionalProjectHours",
                type: "POST",
                dataType: "json",
                async: false,
                data: {month: month, year: year, tag:tag},
                beforeSend: function (request) {
                return request.setRequestHeader('X-CSRF-Token', $("meta[name='token']").attr('content'));
                },
                error: function () {
                //alert("ERRORRRRRR");
                }
        }).responseText;
        var options;
        var chartHeight;
        if ((jsonData.length) > 134) {

            if (jsonData.length < 200){
                 chartHeight = 250;
            }else{
                chartHeight =jsonData.length ;
            }


            var options = {
                height: chartHeight / 1.3 - 100,
                color: "#0F00FF",
                fontName: "Times-Roman",
                fontSize: 15,
                bold: true,
                series: {
                    0: {
                        visibleInLegend: false
                    }
                },
                bar: {
                    groupWidth: '20%'
                }
            };
            var data = new google.visualization.DataTable(jsonData);
            // Instantiate and draw our chart, passing in some options.
            var chart = new google.visualization.BarChart(document.getElementById('chart'));
            chart.draw(data, options);
        }else {
          $("#chart").html('<p style="margin-right: 70px;font-family: Times-Roman; text-align: center; padding: 20px;">No Data Available</p>');
        }
        $('defs').nextAll("g").eq(1).hide();
   }

Answer 1

我希望你的问题出在这里：

chartHeight =jsonData.length ;

jsonData是一个字符串，因此您要将图表的高度设置为等于字符串中的字符数。请尝试根据DataTable中的数据行数设置高度：

var data = new google.visualization.DataTable(jsonData);
options.height = data.getNumberOfRows() * <height per row> + <offset for chart header and footer>;

删除google图表下方和上方的空白区域？

1 个答案: