总理图如何设置宽度100％

Question

我正在使用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,
};

Answer 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>