Power Apps中通过HTML Text显示Plotly图表的可行性及实现求助

完全可以在Power Apps中显示Plotly图表，不管是静态还是交互形式，以下是具体实现方法：

一、静态图表方案（兼容所有Power Apps环境） #

该方案通过将Plotly图表导出为静态图片，转base64编码后在HTML Text控件中用<img>标签显示，解决你之前Matplotlib可行但Plotly无效的问题——核心是要正确使用Plotly的静态导出API，而非直接复用Python代码。

实现步骤： #

1. Python API端处理：生成Plotly图表后，导出为PNG字节流并编码为base64字符串

   import plotly.express as px
   import base64
   from io import BytesIO
   
   # 生成示例Plotly图表
   fig = px.bar(x=["A", "B", "C"], y=[1, 3, 2])
   # 导出为PNG字节流
   img_bytes = plotly.io.to_image(fig, format='png')
   # 编码为base64字符串
   base64_chart = base64.b64encode(img_bytes).decode('utf-8')
   # 将base64_chart作为API响应返回给Power Apps
   

2. Power Apps端处理：

   • 通过API调用获取base64字符串，存储到集合（比如colCharts）中
   • 在HTML Text控件中设置内容：

     <img src="data:image/png;base64,{First(colCharts).Base64Chart}" style="width:100%;height:auto;" />
     

     其中First(colCharts).Base64Chart替换为你集合中存储base64字符串的字段名。

二、交互图表方案（支持Plotly原生交互） #

如果需要保留Plotly的缩放、悬停等交互功能，可以通过加载Plotly的JavaScript库，将图表JSON数据渲染到HTML控件中。

实现步骤： #

1. Python API端处理：生成Plotly图表后，导出为包含data和layout的JSON字符串

   import plotly.express as px
   
   # 生成示例Plotly图表
   fig = px.bar(x=["A", "B", "C"], y=[1, 3, 2])
   # 导出为JSON格式
   chart_json = fig.to_json()
   # 将chart_json作为API响应返回给Power Apps
   

2. Power Apps端处理：

   • 通过API调用获取JSON字符串，存储到集合（比如colCharts）中
   • 在HTML Text控件中设置内容：

     <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
     <div id="chartContainer" style="width: 100%; height: 400px;"></div>
     <script>
       const chartData = JSON.parse(`{JSON(First(colCharts).ChartJSON, JSONFormat.IgnoreBinaryData)}`);
       Plotly.newPlot('chartContainer', chartData.data, chartData.layout);
     </script>
     

     注意：JSON(...)函数用于将集合中的JSON对象转义为可嵌入HTML的字符串，避免格式错误。

注意事项： #

• 交互方案依赖外部CDN加载Plotly的JS库，部分受安全限制的Power Apps环境可能无法使用，此时可以将Plotly的JS文件打包为静态资源嵌入，或联系管理员开放CDN权限。
• 两种方案都需要确保API返回的数据格式正确，无编码或转义错误。

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