用 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 交互方式。我在这里复制了嵌入 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 实验室互动/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);')

下图是水果图表示例

这是针对您的具体示例