用Python制作Highcharts绘图

我正在使用一个名为justpy的新pythonweb框架，它允许您仅使用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)

---

如何使用HighCharts对象制作图像文件（或在Jupyter笔记本中显示绘图），而不必构建web应用程序？

有两种方法。一个是图像，另一个是交互式图表/黑客

图像。您需要导入

请求

、

图像

和

json

。justpy生成的fig.选项将作为有效负载发送到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笔记本互动/黑客Jupyter的互动方式。我在这里复制了这个方法

您将需要导入2件东西，然后使用

%%javascript

单元格魔术。这些是必需的，因为Highcharts的图表需要Javascript来呈现

单元格1

#import needed
IPython.display import Javascript
import json

from IPython.display import Javascript,HTML
import json
import requests

单元格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)))

#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代码来呈现图表并将其显示在笔记本中

%%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)});

单元格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)))

#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>')

下图是针对

这是为你的具体例子

---

他们在High Charts网站上有这样一个问题

上面说

一个选项是使用getSVG-在不使用任何服务器的情况下导出图像： 第二个选项是使用Highcharts默认导出服务器-发布图表的选项并获取图像：。。。电子概览 第三个选项是设置您自己的导出服务器：

。。。服务器

主代码段：

function(chart) {
    chart.renderer.arc(200, 150, 100, 50, -Math.PI, 0).attr({
        fill : '#FCFFC5',
        stroke : 'black',
        'stroke-width' : 1
     }).add();
}

在stackoverflow上：

这显示了多种方法，并使问题适应代码

var system = require('system');
var page = require('webpage').create();
var fs = require('fs');

// load JS libraries
page.injectJs("js/jquery.min.js");
page.injectJs("js/highcharts/highcharts.js");
page.injectJs("js/highcharts/exporting.js");

// chart demo
var args = {
width: 600,
height: 500
};

var svg = page.evaluate(function(opt){
$('body').prepend('<div id="container"></div>');

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        width: opt.width,
        height: opt.height
    },
    exporting: {
        enabled: false
    },
    title: {
        text: 'Combination chart'
    },
    xAxis: {
        categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
    },
    yAxis: {
        title: {
            text: 'Y-values'
        }
    },
    labels: {
        items: [{
            html: 'Total fruit consumption',
            style: {
                left: '40px',
                top: '8px',
                color: 'black'
            }
        }]
    },
    plotOptions: {
        line: {
            dataLabels: {
                enabled: true
            },
            enableMouseTracking: false
        },
        series: {
            enableMouseTracking: false, 
            shadow: false, 
            animation: false
        }
    },
    series: [{
        type: 'column',
        name: 'Andrii',
        data: [3, 2, 1, 3, 4]
    }, {
        type: 'column',
        name: 'Fabian',
        data: [2, 3, 5, 7, 6]
    }, {
        type: 'column',
        name: 'Joan',
        data: [4, 3, 3, 9, 0]
    }, {
        type: 'spline',
        name: 'Average',
        data: [3, 2.67, 3, 6.33, 3.33],
        marker: {
            lineWidth: 2,
            lineColor: 'white'
        }
    }, {
        type: 'pie',
        name: 'Total consumption',
        data: [{
            name: 'Andrii',
            y: 13,
            color: '#4572A7'
        }, {
            name: 'Fabian',
            y: 23,
            color: '#AA4643'
        }, {
            name: 'Joan',
            y: 19,
            color: '#89A54E'
        }],
        center: [100, 80],
        size: 100,
        showInLegend: false,
        dataLabels: {
            enabled: false
        }
    }]
});

return chart.getSVG();
},  args);

// Saving SVG to a file
fs.write("demo.svg", svg);
// Saving diagram as PDF
page.render('demo.pdf');

phantom.exit();

var-system=require（'system'）；
var page=require（'webpage'）。create（）；
var fs=需要（'fs'）；
//加载JS库
page.injectJs（“js/jquery.min.js”）；
page.injectJs（“js/highcharts/highcharts.js”）；
page.injectJs（“js/highcharts/exporting.js”）；
//图表演示
变量args={
宽度：600，
身高：500
};
var svg=page.evaluate（函数（opt）{
$（'body'）。前缀（“”）；
var图表=新的Highcharts.图表({
图表：{
renderTo:'容器'，
宽度：opt.width，
高度：选择高度
},
出口：{
已启用：false
},
标题：{
文本：“组合图表”
},
xAxis：{
类别：[‘苹果’、‘橘子’、‘梨’、‘香蕉’、‘李子’]
},
亚克斯：{
标题：{
文本：“Y值”
}
},
标签：{
项目：[{
html:‘水果总消费量’，
风格：{
左：“40px”，
顶部：“8px”，
颜色：“黑色”
}
}]
},
打印选项：{
行：{
数据标签：{
已启用：true
},
enableMouseTracking:false
},
系列：{
enableMouseTracking:false，
影子：错，
动画：错误
}
},
系列：[{
键入：“列”，
姓名：'安德烈'，
数据：[3,2,1,3,4]
}, {
键入：“列”，
姓名：'费边'，
数据：[2,3,5,7,6]
}, {
键入：“列”，
姓名：“琼”，
数据：[4,3,3,9,0]
}, {
类型：“样条线”，
名称：'平均'，
数据：[3,2.67,3,6.33,3.33]，
标记：{
线宽：2，
线条颜色：“白色”
}
}, {
键入“pie”，
名称：“总消耗量”，
数据：[{
姓名：'安德烈'，
y:13，
颜色：“#4572A7”
}, {
姓名：'费边'，
y:23，
颜色：“#AA4643”
}, {
姓名：“琼”，
y:19，
颜色：“#89A54E”
}],
中间：[100,80]，
尺码：100，
showInLegend:false，
数据标签：{
已启用：false
}
}]
});
return chart.getSVG（）；
}，args）；
//将SVG保存到文件
编写（“demo.svg”，svg）；
//将图表另存为PDF
page.render（'demo.pdf'）；
phantom.exit（）；

建议在不使用web应用程序的情况下使用Node Export Server渲染图形，但我不知道如何使用Jupyter进行配置。我没有使用Hichart，但我认为引入此库将解决此问题。请参见此处。为什么不使用matplotlib？@Piyussingh，因为交互式图表更好——它们能更有效地向观众传达信息。我认为matplotlib只有在您想批量生成图形时才是好的[会帮助你的！好的，我首先运行了包含我代码的单元格。然后，我运行了你的单元格1、2和3，但是当我运行单元格3时，我得到了错误

Javascript错误：require没有定义。

。你知道如何修复吗？更新：错误只发生在Jupyter实验室。它在Jupyter笔记本上工作。Jupyter实验室没有

require.js

显然..@MultiGoodwerse添加了Jupyter实验室版本

var system = require('system');
var page = require('webpage').create();
var fs = require('fs');

// load JS libraries
page.injectJs("js/jquery.min.js");
page.injectJs("js/highcharts/highcharts.js");
page.injectJs("js/highcharts/exporting.js");

// chart demo
var args = {
width: 600,
height: 500
};

var svg = page.evaluate(function(opt){
$('body').prepend('<div id="container"></div>');

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        width: opt.width,
        height: opt.height
    },
    exporting: {
        enabled: false
    },
    title: {
        text: 'Combination chart'
    },
    xAxis: {
        categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
    },
    yAxis: {
        title: {
            text: 'Y-values'
        }
    },
    labels: {
        items: [{
            html: 'Total fruit consumption',
            style: {
                left: '40px',
                top: '8px',
                color: 'black'
            }
        }]
    },
    plotOptions: {
        line: {
            dataLabels: {
                enabled: true
            },
            enableMouseTracking: false
        },
        series: {
            enableMouseTracking: false, 
            shadow: false, 
            animation: false
        }
    },
    series: [{
        type: 'column',
        name: 'Andrii',
        data: [3, 2, 1, 3, 4]
    }, {
        type: 'column',
        name: 'Fabian',
        data: [2, 3, 5, 7, 6]
    }, {
        type: 'column',
        name: 'Joan',
        data: [4, 3, 3, 9, 0]
    }, {
        type: 'spline',
        name: 'Average',
        data: [3, 2.67, 3, 6.33, 3.33],
        marker: {
            lineWidth: 2,
            lineColor: 'white'
        }
    }, {
        type: 'pie',
        name: 'Total consumption',
        data: [{
            name: 'Andrii',
            y: 13,
            color: '#4572A7'
        }, {
            name: 'Fabian',
            y: 23,
            color: '#AA4643'
        }, {
            name: 'Joan',
            y: 19,
            color: '#89A54E'
        }],
        center: [100, 80],
        size: 100,
        showInLegend: false,
        dataLabels: {
            enabled: false
        }
    }]
});

return chart.getSVG();
},  args);

// Saving SVG to a file
fs.write("demo.svg", svg);
// Saving diagram as PDF
page.render('demo.pdf');

phantom.exit();