PowerApps中QuickChart.io图表格式问题求助：网格线与尺寸设置无效

我在PowerApps画布中使用Chart.JS创建QuickChart.io图表，筛选、渲染等功能均正常，但尝试移除网格线并调整显示区域时，格式设置未生效，请问可能是什么原因？

当前使用的PowerApps公式代码： #

"https://quickchart.io/chart?c="&EncodeUrl("{
   'type': 'bar',
   'data': {
     'labels': ["&Concat(Filter(Table2,Scenario=_code),"'&'X-Axis'&'",")&"],
     'datasets': [
       {
         'label': 'Dataset 2',
         'backgroundColor': 'rgba(54, 162, 235, 0.5)',
         'borderColor': 'rgb(54, 162, 235)',
         'borderWidth': 1,
         'data': ["&Concat(Filter(Table2,Scenario=_code),"'&DataSet1&'",")&"]
       }
     ]
   },
   'options': 
   {
     'elements': {
       'rectangle': {
         'borderWidth': 2
       }
     },
     'responsive': true,
     'maintainAspectRatio': false,
     'legend': {
       'display': false
     },
     'grid': {
       display: false
     },
     'title': {
       'display': true,
       'text': 'Revenue'
     }
   }
 }")

问题原因及解决方法： #

1. 网格线配置位置错误
   Chart.js的网格线控制项并非直接放在options根节点下，而是需要嵌套在scales的X/Y轴配置中。你当前直接写'grid': { display: false }，QuickChart无法识别该配置，导致网格线无法移除。

2. JSON格式不合法
   代码中grid内的display: false未给键名加引号，不符合JSON语法规范（即使QuickChart支持单引号，键名也需要被引号包裹），这会导致配置被忽略。

3. 显示区域调整的配套设置缺失
   maintainAspectRatio: false本身是正确的，但需要确保PowerApps中承载图表的Image控件设置了明确的高度和宽度（比如固定像素值），否则图表无法根据控件尺寸自适应调整显示区域。

修正后的代码示例： #

"https://quickchart.io/chart?c="&EncodeUrl("{
   'type': 'bar',
   'data': {
     'labels': ["&Concat(Filter(Table2,Scenario=_code),"'&'X-Axis'&'",")&"],
     'datasets': [
       {
         'label': 'Dataset 2',
         'backgroundColor': 'rgba(54, 162, 235, 0.5)',
         'borderColor': 'rgb(54, 162, 235)',
         'borderWidth': 1,
         'data': ["&Concat(Filter(Table2,Scenario=_code),"'&DataSet1&'",")&"]
       }
     ]
   },
   'options': 
   {
     'elements': {
       'rectangle': {
         'borderWidth': 2
       }
     },
     'responsive': true,
     'maintainAspectRatio': false,
     'legend': {
       'display': false
     },
     'scales': {
       'x': {
         'grid': {
           'display': false
         }
       },
       'y': {
         'grid': {
           'display': false
         }
       }
     },
     'title': {
       'display': true,
       'text': 'Revenue'
     }
   }
 }")

内容的提问来源于stack exchange，提问作者RCarmody