删除谷歌图形上方和下方的空白处？ [英] Remove blank space below and above google graph?

问题描述

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

I have used google graph on a particular page after few contents. But as the number of rows(data) in google graph increases, space between content and graph increases. I have tried to modify the height, but no result.

这是我的代码 -

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();
   }

推荐答案

我期望您的问题在这里：

I expect that your problem is here:

chartHeight =jsonData.length ;

jsonData 是一个字符串，所以您设置图表的高度等于字符串中的字符数。尝试根据DataTable中的数据行数设置高度：

jsonData is a string, so you are setting the height of the chart to be equal to the number of characters in the string. Try setting the height based on the number of rows of data in the DataTable instead:

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

这篇关于删除谷歌图形上方和下方的空白处？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！