如何在Vue组件中正确渲染Django通过GraphQL导出的Plotly HTML图表

问题根因 #

• 你调用fig.to_html时设置了include_plotlyjs=False，生成的HTML片段没有携带Plotly.js依赖，前端没有对应库无法解析图表逻辑，自然只会显示原始HTML结构
• 你把渲染容器写在了<p>标签里，Plotly生成的是块级图表元素，<p>标签内嵌块级元素会触发浏览器自动闭合标签，导致结构错乱
• v-html属性会覆盖标签内部的所有内容，你写在标签里的{{ signal.signalChart }}属于冗余代码，没有实际作用
• 部分场景下GraphQL序列化层会自动转义HTML字符，比如把<转成<，也会导致页面直接显示原始代码

修复步骤 #

1. 前端安装Plotly.js依赖 #

因为你后端没有打包Plotly.js到HTML片段里，前端需要自行引入依赖：

npm install plotly.js-dist

在当前Vue组件头部引入：

import Plotly from 'plotly.js-dist'

2. 修改模板渲染代码 #

把原来的<p>标签替换为<div>容器，删掉冗余的插值内容：

<template>
  <div class="signal" v-if="signal">
    <h2>{{ signal.symbol }}: {{ signal.marketOpen }}</h2>
    <div>{{ displayableDate(signal.date) }}</div>
    <ul>
      <li>{{ signal.bias }}</li>
      <li>{{ signal.tradeType }}</li>
    </ul>
    <!-- 替换为div容器，只保留v-html属性 -->
    <div v-html="signal.signalChart"></div>
  </div>
</template>

3. 手动触发图表渲染 #

接口拿到数据、DOM更新完成后，调用Plotly的重渲染方法即可：
修改created中的异步逻辑：

async created() {
  const signal = await this.$apollo.query({
    query: gql`
      query ($slug: String!) {
        signalBySlug(slug: $slug) {
          symbol
          marketOpen
          date
          bias
          tradeType
          signalChart
        }
      }
    `,
    variables: {
      slug: this.$route.params.slug,
    },
  });
  this.signal = signal.data.signalBySlug;
  // 等待v-html渲染DOM完成
  await this.$nextTick();
  // 找到图表容器触发重绘
  const chartContainer = document.querySelector('.signal .js-plotly-plot');
  if (chartContainer) {
    Plotly.redraw(chartContainer);
  }
}

可选优化方案（规避XSS风险） #

如果担心v-html带来的跨站脚本安全风险，可以修改后端逻辑，把存储HTML改为存储Plotly的JSON配置：

# 后端保存时改为导出JSON
fig.to_json()

前端拿到JSON字符串后直接调用原生方法渲染：

async created() {
  // 原有接口请求逻辑不变
  this.signal = signal.data.signalBySlug;
  await this.$nextTick();
  // 渲染图表，chart-container是你提前写好的空div的id
  Plotly.newPlot('chart-container', JSON.parse(this.signal.signalChart));
}

额外排查点 #

如果修改后还是显示原始HTML，检查你的GraphQL序列化逻辑，确认signalChart字段没有被自动转义，如果有转义逻辑要针对该字段关闭。

注意：如果图表内容来自不可信的用户输入，不要使用v-html方案，优先选择JSON渲染方案。

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