前端 json 格式的seaborn 绘图

Question

我通过以下方式创建了一个虚拟图：

import seaborn as sns
x=[10 ,20,30 ,40,50]
y=[100,30,200,150,80]
sns.barplot(x,y);

这只是一个例子。

我正在seaborn、matplotlib等中生成不同的图表。

现在前端人员想要生成json格式的图形图像，以进行定制

我该怎么办。

Answer 1

j_1=dict(zip(x,y))
j_2=dict(zip(y,x))

您现在在 json 中拥有这两个选项。

# j_1 is {10: 100, 20: 30, 30: 200, 40: 150, 50: 80}

或者

# j_2 is {100: 10, 30: 20, 200: 30, 150: 40, 80: 50}

如果要以Json格式打印：

import json 
json_object_1 = json.dumps(j_1, indent = 2)

#
{
  "10": 100,
  "20": 30,
  "30": 200,
  "40": 150,
  "50": 80
}

Answer 2

JSON 是一种文本格式。主要有两个选项：

• 好方法 - 将原始值发送到前端并使用绘图库在客户端将其可视化。
• 好的一 - 在服务器上渲染绘图并将图像发送到前端。 使用 Flask 的 SSR 示例。

客户端渲染允许使用缩放、突出显示等方式制作交互式绘图。结果将是动态的，用户会喜欢这样。这些库的示例包括 D3.js、Plotly、Highcharts、Google Charts 等等。

该方法最好取决于您的用例。如果您提供图表作为静态内容的一部分（想想报告数据的每月博客文章），后端渲染并将图表显示为图像就可以了。如果您的服务专注于持续交付数据，那么前端人员确实应该弥补这一不足。

无论如何，服务器端渲染的一个变体是以 Base64 编码生成的图像并附加到 JSON 响应。 我不相信仅仅将图像作为文件（mimetype =“image / png”）获取是有意义的，但这就是matplotlib文档也建议这样做：

buf = BytesIO()
fig.savefig(buf, format="png")
data = base64.b64encode(buf.getbuffer()).decode("ascii")

然后，您可以返回具有 Base64 表示形式的编码字符串（Flask

jsonify

的现代版本响应并自动添加适当的标头和状态）：

return {"plot": f"data:image/png;base64,{data}", **dict_with_other_response_data}