Primeng图表如何设置宽度100％答案

【问题标题】：primeng chart how to set width 100%Primeng图表如何设置宽度100％
【发布时间】：2018-08-06 14:11:03
【问题描述】：

我正在使用 Primeng 4.1，想知道如何设置宽度，以便图表占据行的整个宽度。当我设置 width="100%" 时，它不起作用。谁能帮忙设置一下，让它是 100% 的宽度？

html

<div class="ui-g" style="padding-bottom:10px;">
  <p-panel header="Movement per case" class="ui-g-12 ui-g-nopad barChartPanel">
    <p-chart type="line" [data]="data" [options]="options" width="600" height="400"></p-chart>
  </p-panel>                            
</div>

js

this.options = {
    legend: {
        labels: {
            fontColor: 'white'
        }
    },
    scales: {
        xAxes: [{
            gridLines: {
                color: '#373737'
            },
            ticks: {
                fontColor: '#fff'
            }
        }],
        yAxes: [{
            gridLines: {
                color: '#373737'
            },
            ticks: {
                fontColor: '#fff'
            }
        }]
    },
    maintainAspectRatio: false,
    responsive: false,
};

【问题讨论】：

标签： angular primeng

【解决方案1】：

您是否有堆栈闪电战或其他任何东西来展示您当前所看到的内容？您可以尝试将style="100% !important" 添加到您的 html 标签中，直到找到需要的位置。您也可以在浏览器的开发工具中执行此操作。

<div class="ui-g" style="padding-bottom:10px; width: 100% !important">
  <p-panel header="Movement per case" class="ui-g-12 ui-g-nopad barChartPanel" style="width: 100% !important">
    <p-chart type="line" [data]="data" [options]="options" width="600" height="400"></p-chart>
  </p-panel>                            
</div>

【讨论】：