python - 用 Python 绘制 Highcharts 图

Question

我正在使用一个名为 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:

我现在想弄清楚如何只显示 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 应用程序？

Answer 1

有两种方法可以做到。一个作为图像，另一个作为交互式图表/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

这是针对您的具体示例