图表在ng2-google-charts中调整大小

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了图表在ng2-google-charts中调整大小相关的知识,希望对你有一定的参考价值。

我使用此文档https://www.npmjs.com/package/ng2-google-charts创建了一个图表。

<google-chart style="height: 100%!important; width: 80%!important;" [data]="pieChartData"></google-chart>

对于大屏幕来说它看起来很小。无论如何我可以调整大屏幕的大小吗? enter image description here

答案

您可以在选项中指定宽度和高度的值。但它没有响应。

pieChartData =  {
  chartType: 'PieChart',
  dataTable: [
    ['Task', 'Hours per Day'],
    ['Work',     11],
    ['Eat',      2],
    ['Commute',  2],
    ['Watch TV', 2],
    ['Sleep',    7]
  ],
  options: {'title': 'Tasks', 
            'width': 700,
            'height': 600},
};

以上是关于图表在ng2-google-charts中调整大小的主要内容,如果未能解决你的问题,请参考以下文章

使行扩展元素,即 extjs 网格和图表在窗口调整大小时调整大小

gridster c3 图表自动调整大小问题

在窗口调整大小时动态调整画布大小

剑道 UI 图表没有调整大小?

如何根据容器尺寸的变化调整 Morris.js 图表的大小

如何在容器尺寸的更改上调整Morris.js图表 的大小