我正在使用一个名为 justpy 的新 Python Web 框架,它允许您仅使用 Python 构建 Web 应用程序的后端和前端。该框架还与 javascript Highcharts 库集成。以下是构建包含 Highcharts 图的 Web 应用程序的方法:
import justpy as jp
import pandas as pd
wm = pd.read_csv('https://elimintz.github.io/women_majors.csv').round(2)
# Create list of majors which start under 20% women students
wm_under_20 = list(wm.loc[0, wm.loc[0] < 20].index)
def women_majors():
wp = jp.WebPage()
wm.jp.plot(0, wm_under_20, kind='spline', a=wp, title='The gender gap is transitory - even for extreme cases',
subtitle='Percentage of Bachelors conferred to women form 1970 to 2011 in the US for extreme cases where the percentage was less than 20% in 1970',
classes='m-2 p-2 w-3/4')
return wp
jp.justpy(women_majors)
这将在 localhost:8000 上加载 webapp:![enter image description here](https://i.sstatic.net/qzMhmm.png)
我现在想弄清楚如何只显示 Highcharts 图,而不必构建 Web 应用程序。
如果我将上面的代码修改为:
import justpy as jp
import pandas as pd
wm = pd.read_csv('https://elimintz.github.io/women_majors.csv').round(2)
# Create list of majors which start under 20% women students
wm_under_20 = list(wm.loc[0, wm.loc[0] < 20].index)
fig = wm.jp.plot(0, wm_under_20, kind='spline', title='The gender gap is transitory - even for extreme cases',
subtitle='Percentage of Bachelors conferred to women form 1970 to 2011 in the US for extreme cases where the percentage was less than 20% in 1970',
classes='m-2 p-2 w-3/4')
print(fig)
这将返回以下输出: HighCharts(id: 1, vue_type: chart, chart options: {'series': [{'data': [4.23,...
如何使用 HighCharts 对象制作图像文件(或在 Jupyter 笔记本中显示绘图)而无需构建 Web 应用程序?
最佳答案
有两种方法可以做到。一个作为图像,另一个作为交互式图表/hacky。
图片 .您需要导入 requests
, Image
和 json
. justpy 生成的 fig.options 将作为有效负载发送到 highcharts 导出服务器,并将返回一个图像。
import requests
from IPython.display import Image
import json
#using the fig output from the justpy.plot extension
#fig = wm.jp.plot(0, ......
payload = {"async": True,
"constr": "Chart",
"infile": fig.options,
"scale": False,
"type": "image/png",
"width": False}
response = requests.post("""https://export.highcharts.com/""" ,json=payload)
Image(url='https://export.highcharts.com/'+response.text)
Jupyter Notebook Interactive/Hacky 为 Jupyter 做交互的方式。我复制了这里的方法 Embedding d3.js您需要导入 2 个东西,然后使用
%%javascript
细胞魔法。这些是必需的,因为 Highcharts 的图表需要 Javascript 才能呈现。单元格 1
#import needed
IPython.display import Javascript
import json
单元 2 #using the fig output from the justpy.plot extension
#fig = wm.jp.plot(0, ......
#this converts the dict(addict is actually whats used by justpy) into json
Javascript("""
window.dataForchart={};
""".format(json.dumps(fig.options)))
单元 3 这将运行呈现图表并将其显示在笔记本中的 javascript 代码
%%javascript
require.config({
packages: [{
name: 'highcharts',
main: 'highcharts'
}],
paths: {
'highcharts': 'https://code.highcharts.com'
}
});
$("#chart1").remove();
element.append(`<div id="chart1"></div>`);
require([
'highcharts',
'highcharts/modules/exporting',
'highcharts/modules/accessibility'
], function (Highcharts){Highcharts.chart("chart1", window.dataForchart)});
Jupyter Lab Interactive/Hacky 单元格 1
from IPython.display import Javascript,HTML
import json
import requests
单元 2 #loads highcharts into the notebook. Succeeding calls for
#Highchart will work if you open this notebook.
response = requests.get('https://code.highcharts.com/highcharts.js')
Javascript(response.text)
单元格 3 Javascript("""
window.dataForchart={};
""".format(json.dumps(fig.options)))
单元格 4 #the HTML function has to be in the last line of the cell
#for this to work. Also this become the output cell
HTML('<div id="chart123"></div>')
单元格 5 #make sure that the chart id for the divs you make are unique so they
#dont overwrite each other
Javascript('Highcharts.chart("chart123", window.dataForchart);')
下图适用于 Fruit Chart example![fruit_chart](https://i.sstatic.net/FRuaH.png)
这是针对您的具体示例
![your_example](https://i.sstatic.net/RAw4R.png)
关于python - 用 Python 绘制 Highcharts 图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66696549/