英文:
How to get element from PyScript to JavaScript
问题
我想用JavaScript显示一个雷达图，使用来自PyScript的元素值。然而，尝试了我的代码后，我无法显示图表。
我尝试过：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>
Read CSV with Pandas using PyScript
</title>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<script defer src="https://cdn.jsdelivr.net/pyodide/v0.23.4/full/pyodide.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<script src="echarts.js"></script>
</head>
<body>
<p id="csv"></p>
<py-config type="json">
{
"packages": ["pandas"]
}
</py-config>
<py-script>
import pandas as pd
import numpy as np
from pyodide.http import open_url
#from js import createObject
#from pyodide.ffi import create_proxy
#createObject(create_proxy(globals()), "pyodideGlobals")
url_content = open_url("https://raw.githubusercontent.com/linnlim/Laptop/main/Laptop.csv")
df = pd.read_csv(url_content)
L1_VRAM = df['VRAM'].loc[df.index[0]]
L2_VRAM = df['VRAM'].loc[df.index[1]]
L3_VRAM = df['VRAM'].loc[df.index[2]]
L1_RAM = df['RAM'].loc[df.index[0]]
L2_RAM = df['RAM'].loc[df.index[1]]
L3_RAM = df['RAM'].loc[df.index[2]]
L1_ROM = df['ROM'].loc[df.index[0]]
L2_ROM = df['ROM'].loc[df.index[1]]
L3_ROM = df['ROM'].loc[df.index[2]]
L1_CPU = df['CPU'].loc[df.index[0]]
L2_CPU = df['CPU'].loc[df.index[1]]
L3_CPU = df['CPU'].loc[df.index[2]]
L1_Price = df['Price'].loc[df.index[0]]
L2_Price = df['Price'].loc[df.index[1]]
L3_Price = df['Price'].loc[df.index[2]]
def L1_VRAM():
return df['VRAM'].loc[df.index[0]]
def L2_VRAM():
return df['VRAM'].loc[df.index[1]]
def L3_VRAM():
return df['VRAM'].loc[df.index[2]]
def L1_RAM():
return df['RAM'].loc[df.index[0]]
def L2_RAM():
return df['RAM'].loc[df.index[1]]
def L3_RAM():
return df['RAM'].loc[df.index[2]]
def L1_ROM():
return df['ROM'].loc[df.index[0]]
def L2_ROM():
return df['ROM'].loc[df.index[1]]
def L3_ROM():
return df['ROM'].loc[df.index[2]]
def L1_CPU():
return df['CPU'].loc[df.index[0]]
def L2_CPU():
return df['CPU'].loc[df.index[1]]
def L3_CPU():
return df['CPU'].loc[df.index[2]]
def L1_Price():
return df['Price'].loc[df.index[0]]
def L2_Price():
return df['Price'].loc[df.index[1]]
def L3_Price():
return df['Price'].loc[df.index[2]]
csv = Element('csv')
csv.write(L3_CPU())
</py-script>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
console.log(`In Python right now, x = ${pyscript.interpreter.globals.get('L1_CPU')})
option = {
title: {
text: 'Basic Radar Chart'
},
legend: {
data: ['Laptop 1', 'Laptop 2', 'Laptop 3']
},
radar: {
// shape: 'circle',
indicator: [
{ name: 'VRAM', max: 10 },
{ name: 'RAM', max: 10 },
{ name: 'ROM', max: 10 },
{ name: 'CPU', max: 10 },
{ name: 'Price', max: 10 }
]
},
series: [
{
name: 'Laptop Specification',
type: 'radar',
data: [
{
value: [${pyscript.interpreter.globals.get('L1_VRAM')}, ${pyscript.interpreter.globals.get('L1_RAM')}, ${pyscript.interpreter.globals.get('L1_ROM')}, ${pyscript.interpreter.globals.get('L1_CPU')}, ${pyscript.interpreter.globals.get('L1_Price')}],
name: 'Laptop 1'
},
{
value: [${pyscript.interpreter.globals.get('L2_VRAM')}, ${pyscript.interpreter.globals.get('L2_RAM')}, ${pyscript.interpreter.globals.get('L2_ROM')}, ${pyscript.interpreter.globals.get('L2_CPU')}, ${pyscript.interpreter.globals.get('L2_Price')}],
name: 'Laptop 2'
},
{
value: [${pyscript.interpreter.globals.get('L3_VRAM')}, ${pyscript.interpreter.globals.get('L3_RAM')}, ${pyscript.interpreter.globals.get('L3_ROM')}, ${pyscript.interpreter.globals.get('L3_CPU')}, ${pyscript.interpreter.globals.get('L3_Price')}],
name: 'Laptop 3'
}
]
}
]
};
option && myChart.setOption(option);
</script>
</body>
</html>
我期望显示一个雷达图，其中包含3个笔记本电脑规格的多边形（VRAM、RAM、ROM、CPU、价格）。
我认为问题出在${pyscript.interpreter.globals.get()}函数上。
提前致谢。
英文:
I would like to display a radar chart with JavaScript by using the element values from PyScript. However, I could not display the chart after trying my code.
I have tried:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>
Read CSV with Pandas using PyScript
</title>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<script defer src="https://cdn.jsdelivr.net/pyodide/v0.23.4/full/pyodide.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<script src="echarts.js"></script>
</head>
<body>
<p id="csv"></p>
<py-config type="json">
{
"packages": ["pandas"]
}
</py-config>
<py-script>
import pandas as pd
import numpy as np
from pyodide.http import open_url
#from js import createObject
#from pyodide.ffi import create_proxy
#createObject(create_proxy(globals()), "pyodideGlobals")
url_content = open_url("https://raw.githubusercontent.com/linnlim/Laptop/main/Laptop.csv")
df = pd.read_csv(url_content)
L1_VRAM = df['VRAM'].loc[df.index[0]]
L2_VRAM = df['VRAM'].loc[df.index[1]]
L3_VRAM = df['VRAM'].loc[df.index[2]]
L1_RAM = df['RAM'].loc[df.index[0]]
L2_RAM = df['RAM'].loc[df.index[1]]
L3_RAM = df['RAM'].loc[df.index[2]]
L1_ROM = df['ROM'].loc[df.index[0]]
L2_ROM = df['ROM'].loc[df.index[1]]
L3_ROM = df['ROM'].loc[df.index[2]]
L1_CPU = df['CPU'].loc[df.index[0]]
L2_CPU = df['CPU'].loc[df.index[1]]
L3_CPU = df['CPU'].loc[df.index[2]]
L1_Price = df['Price'].loc[df.index[0]]
L2_Price = df['Price'].loc[df.index[1]]
L3_Price = df['Price'].loc[df.index[2]]
def L1_VRAM():
return df['VRAM'].loc[df.index[0]]
def L2_VRAM():
return df['VRAM'].loc[df.index[1]]
def L3_VRAM():
return df['VRAM'].loc[df.index[2]]
def L1_RAM():
return df['RAM'].loc[df.index[0]]
def L2_RAM():
return df['RAM'].loc[df.index[1]]
def L3_RAM():
return df['RAM'].loc[df.index[2]]
def L1_ROM():
return df['ROM'].loc[df.index[0]]
def L2_ROM():
return df['ROM'].loc[df.index[1]]
def L3_ROM():
return df['ROM'].loc[df.index[2]]
def L1_CPU():
return df['CPU'].loc[df.index[0]]
def L2_CPU():
return df['CPU'].loc[df.index[1]]
def L3_CPU():
return df['CPU'].loc[df.index[2]]
def L1_Price():
return df['Price'].loc[df.index[0]]
def L2_Price():
return df['Price'].loc[df.index[1]]
def L3_Price():
return df['Price'].loc[df.index[2]]
csv = Element('csv')
csv.write(L3_CPU())
</py-script>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
console.log(`In Python right now, x = ${pyscript.interpreter.globals.get('L1_CPU')})
option = {
title: {
text: 'Basic Radar Chart'
},
legend: {
data: ['Laptop 1', 'Laptop 2', 'Laptop 3']
},
radar: {
// shape: 'circle',
indicator: [
{ name: 'VRAM', max: 10 },
{ name: 'RAM', max: 10 },
{ name: 'ROM', max: 10 },
{ name: 'CPU', max: 10 },
{ name: 'Price', max: 10 }
]
},
series: [
{
name: 'Laptop Specification',
type: 'radar',
data: [
{
value: [${pyscript.interpreter.globals.get('L1_VRAM')}, ${pyscript.interpreter.globals.get('L1_RAM')}, ${pyscript.interpreter.globals.get('L1_ROM')}, ${pyscript.interpreter.globals.get('L1_CPU')}, ${pyscript.interpreter.globals.get('L1_Price')}],
name: 'Laptop 1'
},
{
value: [${pyscript.interpreter.globals.get('L2_VRAM')}, ${pyscript.interpreter.globals.get('L2_RAM')}, ${pyscript.interpreter.globals.get('L2_ROM')}, ${pyscript.interpreter.globals.get('L2_CPU')}, ${pyscript.interpreter.globals.get('L2_Price')}],
name: 'Laptop 2'
},
{
value: [${pyscript.interpreter.globals.get('L3_VRAM')}, ${pyscript.interpreter.globals.get('L3_RAM')}, ${pyscript.interpreter.globals.get('L3_ROM')}, ${pyscript.interpreter.globals.get('L3_CPU')}, ${pyscript.interpreter.globals.get('L3_Price')}],
name: 'Laptop 3'
}
]
}
]
};
option && myChart.setOption(option);
</script>
</body>
</html>
I am expecting to display a radar chart with 3 polygons of the laptop specifications (VRAM, RAM, ROM, CPU, Price).
I think the problem is with the ${pyscript.interpreter.globals.get()} function.
Thanks in advance.
答案1
得分: 0
以下是翻译好的部分：
你发布的代码存在一些小问题：
- 我不确定为什么你在Python值周围包裹了没有参数的函数，但由于它们是函数，你在JavaScript中也必须调用它们（实际上，你调用的是`get`返回的代理）：
`pyscript.interpreter.globals.get('L3_VRAM')()`
- 美元插值只能在模板文字内部使用，例如，
`` `${pyscript.interpreter.globals.get('L3_VRAM')()}` ``;
要获取数字。我使用了[`Number`构造函数](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/Number)像这样：`Number(pyscript.interpreter.globals.get('L3_VRAM')())`
- 一些Python排列不对齐，很可能是由于转换为文本造成的
主要问题是JavaScript执行的时间。以你目前的方式运行它，JavaScript代码在pyscript完成之前就已执行，所以它没有数据来表示。显然，构建图表的代码必须包含在一个函数内（我称之为`makeChart`），并且在pyscript准备就绪时必须调用该函数。
大多数示例采用的方法（示例从JavaScript函数开始，该函数使用pyscript定义的变量），是将函数作为事件处理程序调用 - 即首先显示一个按钮，让用户按下它，然后显示图表。
为了避免这种情况，似乎只需要允许调用该函数的代码序列完成，然后，在事件循环接管时，调用需要访问pyscript全局变量的函数。
为此，我定义了一个JavaScript函数`startScript`
```lang-js
function startScript(){
setTimeout(makeChart, 0); // 让调用startScript的序列完成
}
<py-script>
# .............
# 在pyscript结束时
js.startScript()
</py-script>
以下是包含这些以及其他细节的完整代码片段：
<!-- 开始代码片段：js 隐藏: false 控制台: false Babel: false -->
<!-- 语言: lang-js -->
function startScript() {
setTimeout(makeChart, 0); // 让调用startScript的序列完成
}
function makeChart() {
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
console.log(`现在在Python中，x = ${pyscript.interpreter.globals.get('L1_CPU')()}`)
option = {
title: {
text: '基本雷达图'
},
legend: {
data: ['笔记本电脑1', '笔记本电脑2', '笔记本电脑3']
},
radar: {
// 形状: '圆',
指标: [{
名称: 'VRAM',
最大: 10
},
{
名称: 'RAM',
最大: 10
},
{
名称: 'ROM',
最大: 10
},
{
名称: 'CPU',
最大: 10
},
{
名称: '价格',
最大: 10
}
]
},
series: [{
名称: '笔记本电脑规格',
类型: '雷达图',
数据: [{
值: [
Number(pyscript.interpreter.globals.get('L1_VRAM')()),
Number(pyscript.interpreter.globals.get('L1_RAM')()),
Number(pyscript.interpreter.globals.get('L1_ROM')()),
Number(pyscript.interpreter.globals.get('L1_CPU')()),
Number(pyscript.interpreter.globals.get('L1_Price')())
],
名称: '笔记本电脑1'
},
{
值: [
Number(pyscript.interpreter.globals.get('L2_VRAM')()),
Number(pyscript.interpreter.globals.get('L2_RAM')()),
Number(pyscript.interpreter.globals.get('L2_ROM')()),
Number(pyscript.interpreter.globals.get('L2_CPU')()),
Number(pyscript.interpreter.globals.get('L2_Price')())
],
名称: '笔记本电脑2'
},
{
值: [
Number(pyscript.interpreter.globals.get('L3_VRAM')()),
Number(pyscript.interpreter.globals.get('L3_RAM')()),
Number(pyscript.interpreter.globals.get('L3_ROM')()),
Number(pyscript.interpreter.globals.get('L3_CPU')()),
Number(pyscript.interpreter.globals.get('L3_Price')())
],
名称: '笔记本电脑3'
}
]
}]
};
option && myChart.setOption(option);
}
<!-- 语言: lang-html -->
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<script defer src="https://cdn.jsdelivr.net/pyodide/v0.23.4/full/pyodide.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<p id="csv"></p>
<py-config type="json">
{
"packages": ["pandas"]
}
</py-config>
<py-script>
import pandas as pd
import numpy as np
from pyodide.http import open_url
#from js import createObject
#from pyodide.ffi import create_proxy
#createObject(create_proxy(globals()), "pyodideGlobals")
url_content = open_url("https://raw.githubusercontent.com/linnlim/Laptop/main/Laptop.csv")
df = pd.read_csv(url_content)
L1_VRAM = df['VRAM'].loc[df.index[0]]
L2_VRAM = df['VRAM'].loc[df.index[1]]
L3_VRAM = df['VRAM'].loc[df.index[2]]
L1_RAM = df['RAM'].loc[df.index[0]]
L2_RAM = df['RAM'].loc[df.index[1]]
L3_RAM = df['RAM'].loc[df.index[2]]
<details>
<summary>英文:</summary>
There are some minor issues with the code you posted:
- I'm not sure why you wrapped the python values in argumentless functions, but since they are functions, you have to invoke (call) them in javascript too (actually what you call is the proxy returned by `get`):
`pyscript.interpreter.globals.get('L3_VRAM')()`
- the dollar interpolation can only be used within template literals, e.g.,
`` `${pyscript.interpreter.globals.get('L3_VRAM')())}` ``;
to get the numbers. I used the [`Number` constructor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/Number) like `Number(pyscript.interpreter.globals.get('L3_VRAM')())`
- some python misalignments, most likely due to conversion to text
The main issue is *when* the javascript gets executed. The way
you run it, the javascript code was executed way before the
pyscript had completed, so it had no data to represent.
Clearly, the code that builds the chart has to be included
inside a function (I called it `makeChart`), and that
function has to be called when pyscript is ready.
The approach taken by most examples (examples
that start a javascript function that uses pyscript
defined variables), is to call the function as an
event handler - that is display a button initially
let the user press it and then display the chart.
To avoid that, it seems sufficient to just allow
the code sequence that called the function complete,
and then, when the event loop takes over, call the
function that needs to access pyscript global variables.
For that I defined a javascript function `startScript`
```lang-js
function startScript(){
setTimeout(makeChart, 0); // let the sequence that called startScript complete
}
<py-script>
# .............
# at the end of the pyscript
js.startScript()
</py-script>
Here's a full snippet with these and other details:
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-js -->
function startScript() {
setTimeout(makeChart, 0); // let the sequence that called startScript complete
}
function makeChart() {
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
console.log(`In Python right now, x = ${pyscript.interpreter.globals.get('L1_CPU')()}`)
option = {
title: {
text: 'Basic Radar Chart'
},
legend: {
data: ['Laptop 1', 'Laptop 2', 'Laptop 3']
},
radar: {
// shape: 'circle',
indicator: [{
name: 'VRAM',
max: 10
},
{
name: 'RAM',
max: 10
},
{
name: 'ROM',
max: 10
},
{
name: 'CPU',
max: 10
},
{
name: 'Price',
max: 10
}
]
},
series: [{
name: 'Laptop Specification',
type: 'radar',
data: [{
value: [
Number(pyscript.interpreter.globals.get('L1_VRAM')()),
Number(pyscript.interpreter.globals.get('L1_RAM')()),
Number(pyscript.interpreter.globals.get('L1_ROM')()),
Number(pyscript.interpreter.globals.get('L1_CPU')()),
Number(pyscript.interpreter.globals.get('L1_Price')())
],
name: 'Laptop 1'
},
{
value: [
Number(pyscript.interpreter.globals.get('L2_VRAM')()),
Number(pyscript.interpreter.globals.get('L2_RAM')()),
Number(pyscript.interpreter.globals.get('L2_ROM')()),
Number(pyscript.interpreter.globals.get('L2_CPU')()),
Number(pyscript.interpreter.globals.get('L2_Price')())
],
name: 'Laptop 2'
},
{
value: [
Number(pyscript.interpreter.globals.get('L3_VRAM')()),
Number(pyscript.interpreter.globals.get('L3_RAM')()),
Number(pyscript.interpreter.globals.get('L3_ROM')()),
Number(pyscript.interpreter.globals.get('L3_CPU')()),
Number(pyscript.interpreter.globals.get('L3_Price')())
],
name: 'Laptop 3'
}
]
}]
};
option && myChart.setOption(option);
}
<!-- language: lang-html -->
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<script defer src="https://cdn.jsdelivr.net/pyodide/v0.23.4/full/pyodide.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<p id="csv"></p>
<py-config type="json">
{
"packages": ["pandas"]
}
</py-config>
<py-script>
import pandas as pd
import numpy as np
from pyodide.http import open_url
#from js import createObject
#from pyodide.ffi import create_proxy
#createObject(create_proxy(globals()), "pyodideGlobals")
url_content = open_url("https://raw.githubusercontent.com/linnlim/Laptop/main/Laptop.csv")
df = pd.read_csv(url_content)
L1_VRAM = df['VRAM'].loc[df.index[0]]
L2_VRAM = df['VRAM'].loc[df.index[1]]
L3_VRAM = df['VRAM'].loc[df.index[2]]
L1_RAM = df['RAM'].loc[df.index[0]]
L2_RAM = df['RAM'].loc[df.index[1]]
L3_RAM = df['RAM'].loc[df.index[2]]
L1_ROM = df['ROM'].loc[df.index[0]]
L2_ROM = df['ROM'].loc[df.index[1]]
L3_ROM = df['ROM'].loc[df.index[2]]
L1_CPU = df['CPU'].loc[df.index[0]]
L2_CPU = df['CPU'].loc[df.index[1]]
L3_CPU = df['CPU'].loc[df.index[2]]
L1_Price = df['Price'].loc[df.index[0]]
L2_Price = df['Price'].loc[df.index[1]]
L3_Price = df['Price'].loc[df.index[2]]
def L1_VRAM():
return df['VRAM'].loc[df.index[0]]
def L2_VRAM():
return df['VRAM'].loc[df.index[1]]
def L3_VRAM():
return df['VRAM'].loc[df.index[2]]
def L1_RAM():
return df['RAM'].loc[df.index[0]]
def L2_RAM():
return df['RAM'].loc[df.index[1]]
def L3_RAM():
return df['RAM'].loc[df.index[2]]
def L1_ROM():
return df['ROM'].loc[df.index[0]]
def L2_ROM():
return df['ROM'].loc[df.index[1]]
def L3_ROM():
return df['ROM'].loc[df.index[2]]
def L1_CPU():
return df['CPU'].loc[df.index[0]]
def L2_CPU():
return df['CPU'].loc[df.index[1]]
def L3_CPU():
return df['CPU'].loc[df.index[2]]
def L1_Price():
return df['Price'].loc[df.index[0]]
def L2_Price():
return df['Price'].loc[df.index[1]]
def L3_Price():
return df['Price'].loc[df.index[2]]
csv = Element('csv')
csv.write(L3_CPU())
js.startScript()
</py-script>
<div id="main" style="width: 600px;height:400px;"></div>
<!-- end snippet -->
I refrained from optimizing the code in order to keep it as much as possible similar to the original post. While the snippet shows the javascript on top, the original sequence that had the javascript at the end of the file works.
答案2
得分: 0
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>
Read CSV with Pandas using PyScript
</title>
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<script defer src="https://cdn.jsdelivr.net/pyodide/v0.23.4/full/pyodide.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
</head>
<body>
<py-config type="json">
{
"packages": ["pandas"]
}
</py-config>
<py-script>
import pandas as pd
import numpy as np
from pyodide.http import open_url
url_content = open_url("https://raw.githubusercontent.com/linnlim/Laptop/main/Laptop.csv")
df = pd.read_csv(url_content)
L1_VRAM = df['VRAM'].loc[df.index[0]]
L2_VRAM = df['VRAM'].loc[df.index[1]]
L3_VRAM = df['VRAM'].loc[df.index[2]]
L1_RAM = df['RAM'].loc[df.index[0]]
L2_RAM = df['RAM'].loc[df.index[1]]
L3_RAM = df['RAM'].loc[df.index[2]]
L1_ROM = df['ROM'].loc[df.index[0]]
L2_ROM = df['ROM'].loc[df.index[1]]
L3_ROM = df['ROM'].loc[df.index[2]]
L1_CPU = df['CPU'].loc[df.index[0]]
L2_CPU = df['CPU'].loc[df.index[1]]
L3_CPU = df['CPU'].loc[df.index[2]]
L1_Price = df['Price'].loc[df.index[0]]
L2_Price = df['Price'].loc[df.index[1]]
L3_Price = df['Price'].loc[df.index[2]]
def L1_VRAM():
return df['VRAM'].loc[df.index[0]]
def L2_VRAM():
return df['VRAM'].loc[df.index[1]]
def L3_VRAM():
return df['VRAM'].loc[df.index[2]]
def L1_RAM():
return df['RAM'].loc[df.index[0]]
def L2_RAM():
return df['RAM'].loc[df.index[1]]
def L3_RAM():
return df['RAM'].loc[df.index[2]]
def L1_ROM():
return df['ROM'].loc[df.index[0]]
def L2_ROM():
return df['ROM'].loc[df.index[1]]
def L3_ROM():
return df['ROM'].loc[df.index[2]]
def L1_CPU():
return df['CPU'].loc[df.index[0]]
def L2_CPU():
return df['CPU'].loc[df.index[1]]
def L3_CPU():
return df['CPU'].loc[df.index[2]]
def L1_Price():
return df['Price'].loc[df.index[0]]
def L2_Price():
return df['Price'].loc[df.index[1]]
def L3_Price():
return df['Price'].loc[df.index[2]]
js.startScript()
</py-script>
<div id="main" style="width: 600px;height:400px;"></div>
<script>
function startScript()
{
setTimeout(makeChart, 0); // let the sequence that called startScript complete
}
function makeChart()
{
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
console.log(`In Python right now, x = ${pyscript.interpreter.globals.get('L1_CPU')()}`)
option = {
title: {
text: 'Basic Radar Chart'
},
legend: {
data: ['Laptop 1', 'Laptop 2', 'Laptop 3']
},
radar: {
// shape: 'circle',
indicator: [{
name: 'VRAM',
max: 10
},
{
name: 'RAM',
max: 10
},
{
name: 'ROM',
max: 10
},
{
name: 'CPU',
max: 10
},
{
name: 'Price',
max: 10
}
]
},
series: [{
name: 'Laptop Specification',
type: 'radar',
data: [{
value: [
Number(pyscript.interpreter.globals.get('L1_VRAM')()),
Number(pyscript.interpreter.globals.get('L1_RAM')()),
Number(pyscript.interpreter.globals.get('L1_ROM')()),
Number(pyscript.interpreter.globals.get('L1_CPU')()),
Number(pyscript.interpreter.globals.get('L1_Price')())
],
name: 'Laptop 1'
},
{
value: [
Number(pyscript.interpreter.globals.get('L2_VRAM')()),
Number(pyscript.interpreter.globals.get('L2_RAM')()),
Number(pyscript.interpreter.globals.get('L2_ROM')()),
Number(pyscript.interpreter.globals.get('L2_CPU')()),
Number(pyscript.interpreter.globals.get('L2_Price')())
],
name: 'Laptop 2'
},
{
value: [
Number(pyscript.interpreter.globals.get('L3_VRAM')()),
Number(pyscript.interpreter.globals.get('L3_RAM')()),
Number(pyscript.interpreter.globals.get('L3_ROM')()),
Number(pyscript.interpreter.globals.get('L3_CPU')()),
Number(pyscript.interpreter.globals.get('L3_Price')())
],
name: 'Laptop 3'
}
]
}]
};
option && myChart.setOption(option);
}
</script>
</body>
</html>
英文:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>
Read CSV with Pandas using PyScript
</title>
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<script defer src="https://cdn.jsdelivr.net/pyodide/v0.23.4/full/pyodide.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<body>
<py-config type="json">
{
"packages": ["pandas"]
}
</py-config>
<py-script>
import pandas as pd
import numpy as np
from pyodide.http import open_url
url_content = open_url("https://raw.githubusercontent.com/linnlim/Laptop/main/Laptop.csv")
df = pd.read_csv(url_content)
L1_VRAM = df['VRAM'].loc[df.index[0]]
L2_VRAM = df['VRAM'].loc[df.index[1]]
L3_VRAM = df['VRAM'].loc[df.index[2]]
L1_RAM = df['RAM'].loc[df.index[0]]
L2_RAM = df['RAM'].loc[df.index[1]]
L3_RAM = df['RAM'].loc[df.index[2]]
L1_ROM = df['ROM'].loc[df.index[0]]
L2_ROM = df['ROM'].loc[df.index[1]]
L3_ROM = df['ROM'].loc[df.index[2]]
L1_CPU = df['CPU'].loc[df.index[0]]
L2_CPU = df['CPU'].loc[df.index[1]]
L3_CPU = df['CPU'].loc[df.index[2]]
L1_Price = df['Price'].loc[df.index[0]]
L2_Price = df['Price'].loc[df.index[1]]
L3_Price = df['Price'].loc[df.index[2]]
def L1_VRAM():
return df['VRAM'].loc[df.index[0]]
def L2_VRAM():
return df['VRAM'].loc[df.index[1]]
def L3_VRAM():
return df['VRAM'].loc[df.index[2]]
def L1_RAM():
return df['RAM'].loc[df.index[0]]
def L2_RAM():
return df['RAM'].loc[df.index[1]]
def L3_RAM():
return df['RAM'].loc[df.index[2]]
def L1_ROM():
return df['ROM'].loc[df.index[0]]
def L2_ROM():
return df['ROM'].loc[df.index[1]]
def L3_ROM():
return df['ROM'].loc[df.index[2]]
def L1_CPU():
return df['CPU'].loc[df.index[0]]
def L2_CPU():
return df['CPU'].loc[df.index[1]]
def L3_CPU():
return df['CPU'].loc[df.index[2]]
def L1_Price():
return df['Price'].loc[df.index[0]]
def L2_Price():
return df['Price'].loc[df.index[1]]
def L3_Price():
return df['Price'].loc[df.index[2]]
js.startScript()
</py-script>
<div id="main" style="width: 600px;height:400px;"></div>
<script>
function startScript()
{
setTimeout(makeChart, 0); // let the sequence that called startScript complete
}
function makeChart()
{
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
console.log(`In Python right now, x = ${pyscript.interpreter.globals.get('L1_CPU')()}`)
option = {
title: {
text: 'Basic Radar Chart'
},
legend: {
data: ['Laptop 1', 'Laptop 2', 'Laptop 3']
},
radar: {
// shape: 'circle',
indicator: [{
name: 'VRAM',
max: 10
},
{
name: 'RAM',
max: 10
},
{
name: 'ROM',
max: 10
},
{
name: 'CPU',
max: 10
},
{
name: 'Price',
max: 10
}
]
},
series: [{
name: 'Laptop Specification',
type: 'radar',
data: [{
value: [
Number(pyscript.interpreter.globals.get('L1_VRAM')()),
Number(pyscript.interpreter.globals.get('L1_RAM')()),
Number(pyscript.interpreter.globals.get('L1_ROM')()),
Number(pyscript.interpreter.globals.get('L1_CPU')()),
Number(pyscript.interpreter.globals.get('L1_Price')())
],
name: 'Laptop 1'
},
{
value: [
Number(pyscript.interpreter.globals.get('L2_VRAM')()),
Number(pyscript.interpreter.globals.get('L2_RAM')()),
Number(pyscript.interpreter.globals.get('L2_ROM')()),
Number(pyscript.interpreter.globals.get('L2_CPU')()),
Number(pyscript.interpreter.globals.get('L2_Price')())
],
name: 'Laptop 2'
},
{
value: [
Number(pyscript.interpreter.globals.get('L3_VRAM')()),
Number(pyscript.interpreter.globals.get('L3_RAM')()),
Number(pyscript.interpreter.globals.get('L3_ROM')()),
Number(pyscript.interpreter.globals.get('L3_CPU')()),
Number(pyscript.interpreter.globals.get('L3_Price')())
],
name: 'Laptop 3'
}
]
}]
};
option && myChart.setOption(option);
}
</script>
</body>
</html>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论