如何使用内容传递网络来导入Brython和Highchart的Javascript文件

DebugUsery
86 阅读7分钟

使用Brython进行数据表示

除了JavaScript之外，Python是另一种用于网络开发的替代语言。这是由于Flask、Hug和Cherrypy等微框架的缘故。

Brython是一种具有Python3性能的客户端脚本语言，适应HTML5环境。因此，我们可以使用Brython来运行客户端的网络应用。

Brython与JavaScript和Vue、Bokeh、Highchart和Phaser等库兼容。

在本教程中，我们将讨论在Brython中使用饼图和散点图的数据表示过程。

让我们开始吧!

前提条件

为了跟上进度，读者应该

  • 安装[Python]可执行文件。
  • 有一定的[Python]和[Javascrip]编程技能。
  • 安装一个 IDE，如[Visual Studio Code]。

目标

本教程的目的是指导读者如何。

  1. 在我们的本地环境中安装Brython。我们可以通过以下的主机方法来实现这个目标。
  • PyPI。要使用这种方法，请确保你已经安装了Python3。
  • 内容交付网络（CDN）。
  • Node包管理器（npm）。
  • GitHub。

注意：在我们的项目中，我们将重点关注内容交付网络（CDN）和Node包管理器（npm）。

  1. 使用Highchart和Brython创建一个饼图。

  2. 使用Highchart和Brython创建一个散点图。

开始工作

为了开始工作，我们将在本地环境中安装Brython。

有两种方法来安装Brython，我们将首先使用Node包管理器。

使用Node包管理器

Node.js是一个JavaScript运行时，用于构建可扩展的网络应用。Node可以在网络浏览器之外执行JavaScript代码。

为了使用Node包管理器（npm）安装Brython，我们下载并安装Node.js。

安装完成后，我们将在终端运行下面的命令。

npm install brython

注意：确保你在工作目录下运行上述命令。这将创建一个名为node_modules的文件夹，其中包含Brython包。

为了将brython.js 和brython_stdlib.js 文件添加到我们的网络项目中，我们将使用下面的脚本标签。

<script type="text/javascript" src="./node_modules/brython/brython.js"></script>
<script src="./node_modules/brython/brython_stdlib.js"></script>

使用上面的代码片段，我们已经使用Node包管理器成功地安装了Brython。

使用内容交付网络

Brython也可以使用CDN链接从网上获取。JavaScript中的内容交付网络（CDN）使用脚本标签中的src 属性来交付托管的样式表和JavaScript文件。

我们将使用CDN从网上获取brython.js 和brython_stdlib.js 文件，如下所示。

<script src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.10.4/brython.js" integrity="sha512-Dr8IR/2fk/pBmngFLduWN5Ys/t7lcPxGgLCulHdTdgDrDRnGb+ANMxGXq+DKVN87jom+N3BrzzI476Pf98RReA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.10.4/brython_stdlib.js" integrity="sha512-kMRN6F4Yq4sNLbPG2lH3EO9n776JHHZub+UWogDxVjh9uTnoVo3wtN/rnQD4C4/AZtqI2zQdvdouGAAxOGwNeA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

这是最简单的安装Brython的方法。然而，为了使这种方法成功，你应该在线。

这两种方法都能有效地将brython.js 和brython_stdlib.js 集成到我们的项目中。

设置环境

下面的步骤将展示如何设置用于创建饼图和散点图的HTML文件。

除了Brython模块之外，我们的项目还需要一些软件包。它们包括

  • Highcharts.js
  • JQuery
  • Exporting.js
安装Highcharts模块。

要安装Highcharts模块，请使用以下代码。

npm install highcharts

使用上面的命令，我们将下载一些重要的Highchart模块，如highchart.js 和exporting.js 。

exporting.js 库允许我们下载不同文件格式的图表，如PDF、PNG、矢量图像（SVG）和JPG。

在HTML模板代码中，我们将添加Jquery 脚本、exporting.js 文件和highchart.js 模块，如下所示。

<!-- jquery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- highchart -->
<script src="./node_modules/highcharts/highcharts.js"></script>
<!-- exporting -->
<script src="./node_modules/highcharts/modules/exporting.js"></script>
添加brython.js和brython_stdlib.js文件

为了添加brython.js和brython_stdlib.js文件，我们首先使用脚本标签将上述Brython模块纳入我们的模板。

接下来，我们将body标签中的onload 属性设置为brython(1) 。这使我们能够在浏览器的控制台打印错误信息。

在body 标签中，我们添加一个id为container 的div 标签，这个div有以下内联样式。

#container{
    min-width: 310px; 
    height: 400px; 
    margin: 0 auto
}

下面是我们的HTML文件现在的样子。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Pie chart</title>
    <!-- jquery -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <!-- highchart -->
    <script src="./node_modules/highcharts/highcharts.js"></script>
    <!-- exporting -->
    <script src="./node_modules/highcharts/modules/exporting.js"></script>
    <!-- brython -->
    <script type="text/javascript" src="./node_modules/brython/brython.js"></script>
    <!-- brython stdlib -->
    <script src="./node_modules/brython/brython_stdlib.js"></script>
</head>
<body onload="brython(1)">
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>

使用Brython创建一个饼图。

在统计学中，饼图是一个circular ，分成几块来显示数字比例的图形。

为了构建饼图，我们将创建一个Python文件，名为chart.py. 随着我们的进展，这个文件将包含一些构建饼图所需的必要代码。

让我们开始吧!

Chart.py文件

我们将创建chart.py 文件，然后使用脚本标签将其导入我们的HTML代码中。我们还将设置类型属性为text/python3 。

这个文件通过下面的脚本标签被导入到HTML模板中。

<!-- chart.py -->
<script type="text/python3" src="chart.py"></script>

我们创建的chart.py 文件包含以下代码。

from browser import window

b_highchart = window.Highcharts.Chart.new
b_highchart(
    {
        "chart": {
            "plotBackgroundColor": "#FCFFC5",
            "plotBorderWidth": None,
            "plotShadow": False,
            "renderTo": "container",
        },
        "title": {"text": "Religious Distribution in Nigeria"},
        "tooltip": {"pointFormat": "<b>{point.percentage:.1f}%</b>"},
        "plotOptions": {
            "pie": {
                "allowPointSelect": True,
                "cursor": "pointer",
                "dataLabels": {
                    "enabled": True,
                    "format": "<b>{point.name}</b>: {point.percentage:.1f} %",
                    "style": {"color": "black"},
                },
            }
        },
        "series": [
            {
                "type": "pie",
                "data": [
                    ["Indigenious Beliefs", 10.7],
                    ["Other Christian", 35.3],
                    {
                        "name": "Roman Catholicism",
                        "y": 10.0,
                        "sliced": True,
                        "selected": True,
                    },
                    ["Islam", 43.5],
                    ["Others", 0.5],
                ],
            }
        ],
    }
)

上面的代码使用以下方法和属性来绘制饼图。

  • from browser import window:它导入了window模块，允许Brython访问JavaScript对象。

  • plotBackgroundColor:它绘制了图表区域的背景颜色。

  • plotBorderWidth:它绘制了图表区域的宽度，单位是像素。

  • plotShadow:该方法接收布尔值，并为该区域添加一个阴影。

  • renderTo:这个方法就像javascript中的document.getElementById 。它将接受我们HTML代码中div 标签的id 。

  • tooltip:当我们在图表上悬停时，这个对象在一个小盒子里显示某些细节。

  • allowPointSelect:如果设置为true ，它允许人们切换或选择饼图中的任何片断。

  • Series:这是一组数据。在我们的例子中，它是尼日利亚人的宗教分布。

当我们执行这段代码时，我们的饼图将显示如下。

Piechart

使用Brython创建一个散点图。

散点图测试两个因素或变量之间的关系。为了实现这一点，我们将使用之前用来创建饼图的HTML文件。

我们只需要对chart.py文件做一些修改。

对chart.py文件进行修改

我们将使用下面的chart.py 文件来绘制散点图。

from browser import window

b_highchart = window.Highcharts.Chart.new
b_highchart(
    {
        "chart": {"type": "scatter", "zoomType": "xy", "renderTo": "container"},
        "title": {
            "text": "scatterplot of the height compared to the weight of 53 Individuals by Race."
        },
        "xAxis": {"title": {"text": "Height (cm)"}},
        "yAxis": {"title": {"text": "Weight (kg)"}},
        "plotOptions": {
            "scatter": {
                "marker": {
                    "radius": 5,
                    "states": {
                        "hover": {"enabled": True, "lineColor": "rgb(100,100,100)"}
                    },
                },
                "states": {"hover": {"marker": {"enabled": False}}},
                "tooltip": {
                    "headerFormat": "<b>{series.name}</b><br>",
                    "pointFormat": "{point.x} cm, {point.y} kg",
                },
            }
        },
        "series": [
            {
                "name": "African",
                "color": "red",
                "data": [
                    [173, 104],
                    [132, 132],
                    [137, 72],
                    [73, 153],
                    [119, 109],
                    [90, 136],
                    [122, 81],
                    [72, 189],
                    [159, 135],
                    [121, 131],
                    [77, 99],
                    [129, 119],
                    [82, 181],
                    [88, 188],
                    [129, 91],
                    [122, 140],
                    [140, 161],
                    [175, 132],
                ],
            },
            {
                "name": "Asian",
                "color": "yellow",
                "data": [
                    [135, 111],
                    [127, 179],
                    [79, 162],
                    [131, 109],
                    [108, 143],
                    [109, 92],
                    [108, 158],
                    [110, 102],
                    [79, 149],
                    [92, 141],
                    [86, 190],
                    [71, 99],
                    [129, 108],
                    [123, 116],
                    [89, 86],
                    [132, 181],
                    [137, 190],
                    [132, 143],
                ],
            },
            {
                "name": "Hispanic",
                "color": "green",
                "data": [
                    [156, 177],
                    [177, 83],
                    [180, 145],
                    [122, 106],
                    [100, 147],
                    [155, 72],
                    [85, 81],
                    [90, 122],
                    [107, 161],
                    [73, 168],
                    [100, 104],
                    [117, 82],
                    [153, 71],
                    [88, 74],
                    [171, 117],
                    [83, 185],
                    [125, 136],
                ],
            },
        ],
    }
)

上面的代码片段显示了体重和身高之间的关系，使用的是来自不同种族的53个个体样本。

散点图中使用的chart 对象有以下方法。

  • type:该方法指定了图表类型。在本例中，它是一个散点图。因此，它的值是scatter 。

  • zoomType:该方法指定了我们移动鼠标时的缩放尺寸。

  • radius:它指定了一个系列中两个最接近的点之间的水平距离。

  • hover:如果启用为真，当鼠标放在任何一个系列上时，会有一个悬停效果。

  • tooltip:这是一个小的模式，当我们把鼠标悬停在图上时，它就会弹出。它显示添加到散点图中的所有细节。

当我们执行上述代码时，散点图如下所示。

Scatterplot

结论

在本教程中，我们使用了一个内容传递网络来导入Brython和Highchart的Javascript文件。

这些库使我们能够以饼图和散点图的形式来表示数据。

avatar
文章
阅读
粉丝