Question

即使数据不可用，我也希望将图表的宽度修正为100％。我在我的js代码中使用以下属性来获取水平滚动，并且在我的应用程序中需要以下属性。

"width": chart1.data.rows.length *130,
 "bar": {groupWidth: 40},

下面的属性用于固定图表的宽度和高度，但它不起作用，因为我使用上面提到的代码来计算和定义当数据更多时水平滚动条显示所需的宽度。 / p>

  chartArea:{left:20,top:0,width:'100%',height:'75%'}

即使数据最小，如何将图表宽度修正为100％的任何建议？请找到演示here

------ ----编辑

数据较少时：

https://plnkr.co/edit/q0NmXQVXgmnOi3g1WcEx?p=preview - 当数据较少且使用“width”设置宽度时：chart1.data.rows.length * 130，当数据不足时，你可以看到图表区域被最小化。

https://plnkr.co/edit/VZqEfHdgZQOEzfUnO21G?p=preview - 宽度设置为100％。这就是我希望我的图表即使数据较少但是如果我使用宽度：“100％”，当数据更多时它不会显示水平滚动条，如https://plnkr.co/edit/iIVfF4rUv0c13SLaNMkr?p=preview

所示

当数据更多时：

https://plnkr.co/edit/3kZR69VMSjFcBHUaCnB9?p=preview - 当数据更多且宽度设置为100％时，不会显示水平滚动条。

https://plnkr.co/edit/iIVfF4rUv0c13SLaNMkr?p=preview - 当数据更多并且使用“width”设置宽度时：chart1.data.rows.length * 130，您可以注意到水平滚动条向下到页面，您可以在其中滚动并查看数据。

Answer 1

如果您没有设置图表宽度，那么它将采用父元素的宽度（100％），如docs中所述：

设置的一个非常常见的选项是图表高度和宽度。您可以在两个位置指定图表大小：在容器的HTML中元素，或在图表选项中。如果指定大小两个位置，图表通常会按照指定的大小在HTML中。如果您未在HTML或中指定图表大小作为选项，图表可能无法正确呈现。

如果您计算的建议宽度大于窗口宽度，则可以将其添加为：

var suggestedWidth = chart1.data.rows.length*130;
if( window.innerWidth<suggestedWidth ) {
  chart1.options.width = suggestedWidth;
};

请参阅2个示例：first和second。

Answer 2

var app = angular.module('myApp', ['googlechart']);

app.controller('myController', function ($scope) {
    var chart1 = {};
    chart1.type = "LineChart";
    chart1.displayed = false;
    chart1.data = {
        "cols": [{
            id: "month",
            label: "Month",
            type: "string"
      }, {
            id: "laptop-id",
            label: "Laptop",
            type: "number"
      }, {
            id: "desktop-id",
            label: "Desktop",
            type: "number"
      }, {
            id: "server-id",
            label: "Server",
            type: "number"
      }, {
            id: "cost-id",
            label: "Shipping",
            type: "number"
      }],
        "rows": [{
            c: [{
                v: "January"
        }, {
                v: 19,
                f: "42 items"
        }, {
                v: 12,
                f: "Ony 12 items"
        }, {
                v: 7,
                f: "7 servers"
        }, {
                v: 4
        }]
      }, {
            c: [{
                    v: "October"
          }, {
                    v: 34
          }, {
                    v: 4
          }, {
                    v: 0
          }, {
                    v: 1
          }

        ]
      }]
    };
    chart1.options = {

        "title": "Sales per month",
        "colors": ['#0000FF', '#009900', '#CC0000', '#DD9900'],
        "defaultColors": ['#0000FF', '#009900', '#CC0000', '#DD9900'],
        "isStacked": "true",
        "fill": 20,
        focusTarget: 'category',
        "displayExactValues": true,
        "vAxis": {
            "title": "Sales unit",
            "gridlines": {
                "count": 10
            }
        },
        "hAxis": {
            "title": "Date"
        },
        /*"width": chart1.data.rows.length *130,*/
        "width": chart1.data.rows.length ? chart1.data.rows.length * 130 : 2000,
        "bar": {
            groupWidth: 40
        },
        chartArea: {
            left: 20,
            top: 0,
            width: '100%',
            height: '75%'
        }
    };
    chart1.view = {
        columns: [0, 1, 2, 3, 4]
    };
    $scope.myChart = chart1;

});

<html ng-app="myApp">

<head>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.js"></script>
<script type="text/javascript" src="app.js"></script>
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-google-chart/0.1.0/ng-google-chart.js"></script>
  <title>Angular-Google-Charts Example</title>
</head>

<body>
 
<div ng-controller="myController">
      <div google-chart chart="myChart"></div> 
 </div>
  
</body>

</html>

即使数据很小，也要修正div的宽度

2 个答案: