如何从 PyScript 获取元素到 JavaScript 中

huangapple
go评论93阅读模式
英文:

How to get element from PyScript to JavaScript

问题

我想用JavaScript显示一个雷达图，使用来自PyScript的元素值。然而，尝试了我的代码后，我无法显示图表。

我尝试过：

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 	<meta charset="utf-8" />
  5. 	<title>
  6. 	Read CSV with Pandas using PyScript
  7. 	</title>
  8. 	<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
  9. 	<script defer src="https://pyscript.net/latest/pyscript.js"></script>
  10. 	<script defer src="https://cdn.jsdelivr.net/pyodide/v0.23.4/full/pyodide.js"></script>
  11. 	<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  12. 	<script src="echarts.js"></script>
  13. 	</head>
  14. 	<body>
  15. 	<p id="csv"></p>
  16. 		<py-config type="json">
  17. 			{
  18. 			  "packages": ["pandas"]
  19. 			}
  20. 		</py-config>
  21. 		<py-script>
  22. 			import pandas as pd
  23. 			import numpy as np
  24. 			from pyodide.http import open_url
  25. 			#from js import createObject
  26. 			#from pyodide.ffi import create_proxy
  27. 			#createObject(create_proxy(globals()), "pyodideGlobals")
  28. 			url_content = open_url("https://raw.githubusercontent.com/linnlim/Laptop/main/Laptop.csv")
  29. 			df = pd.read_csv(url_content)
  30. 			
  31. 			L1_VRAM = df['VRAM'].loc[df.index[0]]
  32. 			L2_VRAM = df['VRAM'].loc[df.index[1]]
  33. 			L3_VRAM = df['VRAM'].loc[df.index[2]]
  34. 			
  35. 			L1_RAM = df['RAM'].loc[df.index[0]]
  36. 			L2_RAM = df['RAM'].loc[df.index[1]]
  37. 			L3_RAM = df['RAM'].loc[df.index[2]]
  38. 			
  39. 			L1_ROM = df['ROM'].loc[df.index[0]]
  40. 			L2_ROM = df['ROM'].loc[df.index[1]]
  41. 			L3_ROM = df['ROM'].loc[df.index[2]]
  42. 			
  43. 			L1_CPU = df['CPU'].loc[df.index[0]]
  44. 			L2_CPU = df['CPU'].loc[df.index[1]]
  45. 			L3_CPU = df['CPU'].loc[df.index[2]]
  46. 			
  47. 			L1_Price = df['Price'].loc[df.index[0]]
  48. 			L2_Price = df['Price'].loc[df.index[1]]
  49. 			L3_Price = df['Price'].loc[df.index[2]]
  50. 			
  51. 			
  52. 			def L1_VRAM():
  53. 				return df['VRAM'].loc[df.index[0]]
  54. 			def L2_VRAM():
  55. 				return df['VRAM'].loc[df.index[1]]
  56. 			def L3_VRAM():
  57. 				return df['VRAM'].loc[df.index[2]]
  58. 				
  59. 			def L1_RAM():
  60. 				return df['RAM'].loc[df.index[0]]
  61. 			def L2_RAM():
  62. 				return df['RAM'].loc[df.index[1]]
  63. 			def L3_RAM():
  64. 				return df['RAM'].loc[df.index[2]]
  65. 				
  66. 			def L1_ROM():
  67. 				return df['ROM'].loc[df.index[0]]
  68. 			def L2_ROM():
  69. 				return df['ROM'].loc[df.index[1]]
  70. 			def L3_ROM():
  71. 				return df['ROM'].loc[df.index[2]]
  72. 				
  73. 			def L1_CPU():
  74. 				return df['CPU'].loc[df.index[0]]
  75. 			def L2_CPU():
  76. 				return df['CPU'].loc[df.index[1]]
  77. 			def L3_CPU():
  78. 				return df['CPU'].loc[df.index[2]]
  79. 				
  80. 			def L1_Price():
  81. 				return df['Price'].loc[df.index[0]]
  82. 			def L2_Price():
  83. 				return df['Price'].loc[df.index[1]]
  84. 			def L3_Price():
  85. 				return df['Price'].loc[df.index[2]]
  86. 				
  87. 			csv = Element('csv')
  88. 			csv.write(L3_CPU())
  89. 		</py-script>
  90. 		<div id="main" style="width: 600px;height:400px;"></div>
  91. 		<script type="text/javascript">
  92. 		var chartDom = document.getElementById('main');
  93. 		var myChart = echarts.init(chartDom);
  94. 		var option;
  95. 		console.log(`In Python right now, x = ${pyscript.interpreter.globals.get('L1_CPU')})
  96. 		option = {
  97. 		  title: {
  98. 			text: 'Basic Radar Chart'
  99. 		  },
  100. 		  legend: {
  101. 			data: ['Laptop 1', 'Laptop 2', 'Laptop 3']
  102. 		  },
  103. 		  radar: {
  104. 			// shape: 'circle',
  105. 			indicator: [
  106. 			  { name: 'VRAM', max: 10 },
  107. 			  { name: 'RAM', max: 10 },
  108. 			  { name: 'ROM', max: 10 },
  109. 			  { name: 'CPU', max: 10 },
  110. 			  { name: 'Price', max: 10 }
  111. 			]
  112. 		  },
  113. 		  series: [
  114. 			{
  115. 			  name: 'Laptop Specification',
  116. 			  type: 'radar',
  117. 			  data: [
  118. 				{
  119. 				  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')}],
  120. 				  name: 'Laptop 1'
  121. 				},
  122. 				{
  123. 				  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')}],
  124. 				  name: 'Laptop 2'
  125. 				},
  126. 				{
  127. 				  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')}],
  128. 				  name: 'Laptop 3'
  129. 				}
  130. 			  ]
  131. 			}
  132. 		  ]
  133. 		};
  134. 		
  136. 		option && myChart.setOption(option);
  137. 		</script>
  138. 	</body>
  139. </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:

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html&gt;
  3. &lt;head&gt;
  4. &lt;meta charset=&quot;utf-8&quot; /&gt;
  5. &lt;title&gt;
  6. Read CSV with Pandas using PyScript
  7. &lt;/title&gt;
  8. &lt;link rel=&quot;stylesheet&quot; href=&quot;https://pyscript.net/latest/pyscript.css&quot; /&gt;
  9. &lt;script defer src=&quot;https://pyscript.net/latest/pyscript.js&quot;&gt;&lt;/script&gt;
  10. &lt;script defer src=&quot;https://cdn.jsdelivr.net/pyodide/v0.23.4/full/pyodide.js&quot;&gt;&lt;/script&gt;
  11. &lt;script src=&quot;https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js&quot;&gt;&lt;/script&gt;
  12. &lt;script src=&quot;echarts.js&quot;&gt;&lt;/script&gt;
  13. &lt;/head&gt;
  14. &lt;body&gt;
  15. &lt;p id=&quot;csv&quot;&gt;&lt;/p&gt;
  16. &lt;py-config type=&quot;json&quot;&gt;
  17. {
  18. &quot;packages&quot;: [&quot;pandas&quot;]
  19. }
  20. &lt;/py-config&gt;
  21. &lt;py-script&gt;
  22. import pandas as pd
  23. import numpy as np
  24. from pyodide.http import open_url
  25. #from js import createObject
  26. #from pyodide.ffi import create_proxy
  27. #createObject(create_proxy(globals()), &quot;pyodideGlobals&quot;)
  28. url_content = open_url(&quot;https://raw.githubusercontent.com/linnlim/Laptop/main/Laptop.csv&quot;)
  29. df = pd.read_csv(url_content)
  30. L1_VRAM = df[&#39;VRAM&#39;].loc[df.index[0]]
  31. L2_VRAM = df[&#39;VRAM&#39;].loc[df.index[1]]
  32. L3_VRAM = df[&#39;VRAM&#39;].loc[df.index[2]]
  33. L1_RAM = df[&#39;RAM&#39;].loc[df.index[0]]
  34. L2_RAM = df[&#39;RAM&#39;].loc[df.index[1]]
  35. L3_RAM = df[&#39;RAM&#39;].loc[df.index[2]]
  36. L1_ROM = df[&#39;ROM&#39;].loc[df.index[0]]
  37. L2_ROM = df[&#39;ROM&#39;].loc[df.index[1]]
  38. L3_ROM = df[&#39;ROM&#39;].loc[df.index[2]]
  39. L1_CPU = df[&#39;CPU&#39;].loc[df.index[0]]
  40. L2_CPU = df[&#39;CPU&#39;].loc[df.index[1]]
  41. L3_CPU = df[&#39;CPU&#39;].loc[df.index[2]]
  42. L1_Price = df[&#39;Price&#39;].loc[df.index[0]]
  43. L2_Price = df[&#39;Price&#39;].loc[df.index[1]]
  44. L3_Price = df[&#39;Price&#39;].loc[df.index[2]]
  45. def L1_VRAM():
  46. return df[&#39;VRAM&#39;].loc[df.index[0]]
  47. def L2_VRAM():
  48. return df[&#39;VRAM&#39;].loc[df.index[1]]
  49. def L3_VRAM():
  50. return df[&#39;VRAM&#39;].loc[df.index[2]]
  51. def L1_RAM():
  52. return df[&#39;RAM&#39;].loc[df.index[0]]
  53. def L2_RAM():
  54. return df[&#39;RAM&#39;].loc[df.index[1]]
  55. def L3_RAM():
  56. return df[&#39;RAM&#39;].loc[df.index[2]]
  57. def L1_ROM():
  58. return df[&#39;ROM&#39;].loc[df.index[0]]
  59. def L2_ROM():
  60. return df[&#39;ROM&#39;].loc[df.index[1]]
  61. def L3_ROM():
  62. return df[&#39;ROM&#39;].loc[df.index[2]]
  63. def L1_CPU():
  64. return df[&#39;CPU&#39;].loc[df.index[0]]
  65. def L2_CPU():
  66. return df[&#39;CPU&#39;].loc[df.index[1]]
  67. def L3_CPU():
  68. return df[&#39;CPU&#39;].loc[df.index[2]]
  69. def L1_Price():
  70. return df[&#39;Price&#39;].loc[df.index[0]]
  71. def L2_Price():
  72. return df[&#39;Price&#39;].loc[df.index[1]]
  73. def L3_Price():
  74. return df[&#39;Price&#39;].loc[df.index[2]]
  75. csv = Element(&#39;csv&#39;)
  76. csv.write(L3_CPU())
  77. &lt;/py-script&gt;
  78. &lt;div id=&quot;main&quot; style=&quot;width: 600px;height:400px;&quot;&gt;&lt;/div&gt;
  79. &lt;script type=&quot;text/javascript&quot;&gt;
  80. var chartDom = document.getElementById(&#39;main&#39;);
  81. var myChart = echarts.init(chartDom);
  82. var option;
  83. console.log(`In Python right now, x = ${pyscript.interpreter.globals.get(&#39;L1_CPU&#39;)})
  84. option = {
  85. title: {
  86. text: &#39;Basic Radar Chart&#39;
  87. },
  88. legend: {
  89. data: [&#39;Laptop 1&#39;, &#39;Laptop 2&#39;, &#39;Laptop 3&#39;]
  90. },
  91. radar: {
  92. // shape: &#39;circle&#39;,
  93. indicator: [
  94. { name: &#39;VRAM&#39;, max: 10 },
  95. { name: &#39;RAM&#39;, max: 10 },
  96. { name: &#39;ROM&#39;, max: 10 },
  97. { name: &#39;CPU&#39;, max: 10 },
  98. { name: &#39;Price&#39;, max: 10 }
  99. ]
  100. },
  101. series: [
  102. {
  103. name: &#39;Laptop Specification&#39;,
  104. type: &#39;radar&#39;,
  105. data: [
  106. {
  107. value: [${pyscript.interpreter.globals.get(&#39;L1_VRAM&#39;)}, ${pyscript.interpreter.globals.get(&#39;L1_RAM&#39;)}, ${pyscript.interpreter.globals.get(&#39;L1_ROM&#39;)}, ${pyscript.interpreter.globals.get(&#39;L1_CPU&#39;)}, ${pyscript.interpreter.globals.get(&#39;L1_Price&#39;)}],
  108. name: &#39;Laptop 1&#39;
  109. },
  110. {
  111. value: [${pyscript.interpreter.globals.get(&#39;L2_VRAM&#39;)}, ${pyscript.interpreter.globals.get(&#39;L2_RAM&#39;)}, ${pyscript.interpreter.globals.get(&#39;L2_ROM&#39;)}, ${pyscript.interpreter.globals.get(&#39;L2_CPU&#39;)}, ${pyscript.interpreter.globals.get(&#39;L2_Price&#39;)}],
  112. name: &#39;Laptop 2&#39;
  113. },
  114. {
  115. value: [${pyscript.interpreter.globals.get(&#39;L3_VRAM&#39;)}, ${pyscript.interpreter.globals.get(&#39;L3_RAM&#39;)}, ${pyscript.interpreter.globals.get(&#39;L3_ROM&#39;)}, ${pyscript.interpreter.globals.get(&#39;L3_CPU&#39;)}, ${pyscript.interpreter.globals.get(&#39;L3_Price&#39;)}],
  116. name: &#39;Laptop 3&#39;
  117. }
  118. ]
  119. }
  120. ]
  121. };
  122. option &amp;&amp; myChart.setOption(option);
  123. &lt;/script&gt;
  124. &lt;/body&gt;
  125. &lt;/html&gt;

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

以下是翻译好的部分：

  1. 你发布的代码存在一些小问题：
  2. - 我不确定为什么你在Python值周围包裹了没有参数的函数，但由于它们是函数，你在JavaScript中也必须调用它们（实际上，你调用的是`get`返回的代理）：
  3. `pyscript.interpreter.globals.get('L3_VRAM')()`
  4. - 美元插值只能在模板文字内部使用，例如，
  5. `` `${pyscript.interpreter.globals.get('L3_VRAM')()}` ``;
  6. 要获取数字。我使用了[`Number`构造函数](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/Number)像这样：`Number(pyscript.interpreter.globals.get('L3_VRAM')())`
  7. - 一些Python排列不对齐，很可能是由于转换为文本造成的
  8. 主要问题是JavaScript执行的时间。以你目前的方式运行它，JavaScript代码在pyscript完成之前就已执行，所以它没有数据来表示。显然，构建图表的代码必须包含在一个函数内（我称之为`makeChart`），并且在pyscript准备就绪时必须调用该函数。
  9. 大多数示例采用的方法（示例从JavaScript函数开始，该函数使用pyscript定义的变量），是将函数作为事件处理程序调用 - 即首先显示一个按钮，让用户按下它，然后显示图表。
  10. 为了避免这种情况，似乎只需要允许调用该函数的代码序列完成，然后，在事件循环接管时，调用需要访问pyscript全局变量的函数。
  11. 为此，我定义了一个JavaScript函数`startScript`
  12. ```lang-js
  13. function startScript(){
  14. setTimeout(makeChart, 0); // 让调用startScript的序列完成
  15. }
  1. <py-script>
  2. # .............
  3. # 在pyscript结束时
  4. js.startScript()
  5. </py-script>

以下是包含这些以及其他细节的完整代码片段：

  1. <!-- 开始代码片段：js 隐藏: false 控制台: false Babel: false -->
  3. <!-- 语言: lang-js -->
  5. function startScript() {
  6.   setTimeout(makeChart, 0); // 让调用startScript的序列完成
  7. }
  9. function makeChart() {
  10.   var chartDom = document.getElementById('main');
  11.   var myChart = echarts.init(chartDom);
  12.   var option;
  13.   console.log(`现在在Python中，x = ${pyscript.interpreter.globals.get('L1_CPU')()}`)
  14.   option = {
  15.     title: {
  16.       text: '基本雷达图'
  17.     },
  18.     legend: {
  19.       data: ['笔记本电脑1', '笔记本电脑2', '笔记本电脑3']
  20.     },
  21.     radar: {
  22.       // 形状: '圆',
  23.       指标: [{
  24.           名称: 'VRAM',
  25.           最大: 10
  26.         },
  27.         {
  28.           名称: 'RAM',
  29.           最大: 10
  30.         },
  31.         {
  32.           名称: 'ROM',
  33.           最大: 10
  34.         },
  35.         {
  36.           名称: 'CPU',
  37.           最大: 10
  38.         },
  39.         {
  40.           名称: '价格',
  41.           最大: 10
  42.         }
  43.       ]
  44.     },
  45.     series: [{
  46.       名称: '笔记本电脑规格',
  47.       类型: '雷达图',
  48.       数据: [{
  49.           值: [
  50.             Number(pyscript.interpreter.globals.get('L1_VRAM')()),
  51.             Number(pyscript.interpreter.globals.get('L1_RAM')()),
  52.             Number(pyscript.interpreter.globals.get('L1_ROM')()),
  53.             Number(pyscript.interpreter.globals.get('L1_CPU')()),
  54.             Number(pyscript.interpreter.globals.get('L1_Price')())
  55.           ],
  56.           名称: '笔记本电脑1'
  57.         },
  58.         {
  59.           值: [
  60.             Number(pyscript.interpreter.globals.get('L2_VRAM')()),
  61.             Number(pyscript.interpreter.globals.get('L2_RAM')()),
  62.             Number(pyscript.interpreter.globals.get('L2_ROM')()),
  63.             Number(pyscript.interpreter.globals.get('L2_CPU')()),
  64.             Number(pyscript.interpreter.globals.get('L2_Price')())
  65.           ],
  66.           名称: '笔记本电脑2'
  67.         },
  68.         {
  69.           值: [
  70.             Number(pyscript.interpreter.globals.get('L3_VRAM')()),
  71.             Number(pyscript.interpreter.globals.get('L3_RAM')()),
  72.             Number(pyscript.interpreter.globals.get('L3_ROM')()),
  73.             Number(pyscript.interpreter.globals.get('L3_CPU')()),
  74.             Number(pyscript.interpreter.globals.get('L3_Price')())
  75.           ],
  76.           名称: '笔记本电脑3'
  77.         }
  78.       ]
  79.     }]
  80.   };
  82.   option && myChart.setOption(option);
  83. }
  85. <!-- 语言: lang-html -->
  87. <script defer src="https://pyscript.net/latest/pyscript.js"></script>
  88. <script defer src="https://cdn.jsdelivr.net/pyodide/v0.23.4/full/pyodide.js"></script>
  89. <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  90. <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
  92. <p id="csv"></p>
  94. <py-config type="json">
  95.     {
  96.     "packages": ["pandas"]
  97.     }
  98. </py-config>
  99. <py-script>
  100.     import pandas as pd
  101.     import numpy as np
  102.     from pyodide.http import open_url
  103.     #from js import createObject
  104.     #from pyodide.ffi import create_proxy
  105.     #createObject(create_proxy(globals()), "pyodideGlobals")
  106.     url_content = open_url("https://raw.githubusercontent.com/linnlim/Laptop/main/Laptop.csv")
  107.     df = pd.read_csv(url_content)
  109.     L1_VRAM = df['VRAM'].loc[df.index[0]]
  110.     L2_VRAM = df['VRAM'].loc[df.index[1]]
  111.     L3_VRAM = df['VRAM'].loc[df.index[2]]
  113.     L1_RAM = df['RAM'].loc[df.index[0]]
  114.     L2_RAM = df['RAM'].loc[df.index[1]]
  115.     L3_RAM = df['RAM'].loc[df.index[2]]
  117.    
  119. <details>
  120. <summary>英文:</summary>
  122. There are some minor issues with the code you posted:
  123. - I&#39;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`):
  124.   `pyscript.interpreter.globals.get(&#39;L3_VRAM&#39;)()`
  125. - the dollar interpolation can only be used within template literals, e.g.,
  126.   `` `${pyscript.interpreter.globals.get(&#39;L3_VRAM&#39;)())}` ``;
  127.   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(&#39;L3_VRAM&#39;)())`
  128. - some python misalignments, most likely due to conversion to text
  130. The main issue is *when* the javascript gets executed. The way 
  131. you run it, the javascript code was executed way before the
  132. pyscript had completed, so it had no data to represent.
  133. Clearly, the code that builds the chart has to be included 
  134. inside a function (I called it `makeChart`), and that 
  135. function has to be called when pyscript is ready.
  137. The approach taken by most examples (examples 
  138. that start a javascript function that uses pyscript
  139. defined variables), is to call the function as an
  140. event handler - that is display a button initially
  141. let the user press it and then display the chart.
  143. To avoid that, it seems sufficient to just allow
  144. the code sequence that called the function complete, 
  145. and then, when the event loop takes over, call the
  146. function that needs to access pyscript global variables.
  148. For that I defined a javascript function `startScript`
  149. ```lang-js
  150. function startScript(){
  151.     setTimeout(makeChart, 0); // let the sequence that called startScript complete
  152. }
  1. &lt;py-script&gt;
  2. # .............
  3. # at the end of the pyscript
  4. js.startScript()
  5. &lt;/py-script&gt;

Here's a full snippet with these and other details:

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-js -->

  1. function startScript() {
  2. setTimeout(makeChart, 0); // let the sequence that called startScript complete
  3. }
  4. function makeChart() {
  5. var chartDom = document.getElementById(&#39;main&#39;);
  6. var myChart = echarts.init(chartDom);
  7. var option;
  8. console.log(`In Python right now, x = ${pyscript.interpreter.globals.get(&#39;L1_CPU&#39;)()}`)
  9. option = {
  10. title: {
  11. text: &#39;Basic Radar Chart&#39;
  12. },
  13. legend: {
  14. data: [&#39;Laptop 1&#39;, &#39;Laptop 2&#39;, &#39;Laptop 3&#39;]
  15. },
  16. radar: {
  17. // shape: &#39;circle&#39;,
  18. indicator: [{
  19. name: &#39;VRAM&#39;,
  20. max: 10
  21. },
  22. {
  23. name: &#39;RAM&#39;,
  24. max: 10
  25. },
  26. {
  27. name: &#39;ROM&#39;,
  28. max: 10
  29. },
  30. {
  31. name: &#39;CPU&#39;,
  32. max: 10
  33. },
  34. {
  35. name: &#39;Price&#39;,
  36. max: 10
  37. }
  38. ]
  39. },
  40. series: [{
  41. name: &#39;Laptop Specification&#39;,
  42. type: &#39;radar&#39;,
  43. data: [{
  44. value: [
  45. Number(pyscript.interpreter.globals.get(&#39;L1_VRAM&#39;)()),
  46. Number(pyscript.interpreter.globals.get(&#39;L1_RAM&#39;)()),
  47. Number(pyscript.interpreter.globals.get(&#39;L1_ROM&#39;)()),
  48. Number(pyscript.interpreter.globals.get(&#39;L1_CPU&#39;)()),
  49. Number(pyscript.interpreter.globals.get(&#39;L1_Price&#39;)())
  50. ],
  51. name: &#39;Laptop 1&#39;
  52. },
  53. {
  54. value: [
  55. Number(pyscript.interpreter.globals.get(&#39;L2_VRAM&#39;)()),
  56. Number(pyscript.interpreter.globals.get(&#39;L2_RAM&#39;)()),
  57. Number(pyscript.interpreter.globals.get(&#39;L2_ROM&#39;)()),
  58. Number(pyscript.interpreter.globals.get(&#39;L2_CPU&#39;)()),
  59. Number(pyscript.interpreter.globals.get(&#39;L2_Price&#39;)())
  60. ],
  61. name: &#39;Laptop 2&#39;
  62. },
  63. {
  64. value: [
  65. Number(pyscript.interpreter.globals.get(&#39;L3_VRAM&#39;)()),
  66. Number(pyscript.interpreter.globals.get(&#39;L3_RAM&#39;)()),
  67. Number(pyscript.interpreter.globals.get(&#39;L3_ROM&#39;)()),
  68. Number(pyscript.interpreter.globals.get(&#39;L3_CPU&#39;)()),
  69. Number(pyscript.interpreter.globals.get(&#39;L3_Price&#39;)())
  70. ],
  71. name: &#39;Laptop 3&#39;
  72. }
  73. ]
  74. }]
  75. };
  76. option &amp;&amp; myChart.setOption(option);
  77. }

<!-- language: lang-html -->

  1. &lt;script defer src=&quot;https://pyscript.net/latest/pyscript.js&quot;&gt;&lt;/script&gt;
  2. &lt;script defer src=&quot;https://cdn.jsdelivr.net/pyodide/v0.23.4/full/pyodide.js&quot;&gt;&lt;/script&gt;
  3. &lt;script src=&quot;https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js&quot;&gt;&lt;/script&gt;
  4. &lt;link rel=&quot;stylesheet&quot; href=&quot;https://pyscript.net/latest/pyscript.css&quot; /&gt;
  5. &lt;p id=&quot;csv&quot;&gt;&lt;/p&gt;
  6. &lt;py-config type=&quot;json&quot;&gt;
  7. {
  8. &quot;packages&quot;: [&quot;pandas&quot;]
  9. }
  10. &lt;/py-config&gt;
  11. &lt;py-script&gt;
  12. import pandas as pd
  13. import numpy as np
  14. from pyodide.http import open_url
  15. #from js import createObject
  16. #from pyodide.ffi import create_proxy
  17. #createObject(create_proxy(globals()), &quot;pyodideGlobals&quot;)
  18. url_content = open_url(&quot;https://raw.githubusercontent.com/linnlim/Laptop/main/Laptop.csv&quot;)
  19. df = pd.read_csv(url_content)
  20. L1_VRAM = df[&#39;VRAM&#39;].loc[df.index[0]]
  21. L2_VRAM = df[&#39;VRAM&#39;].loc[df.index[1]]
  22. L3_VRAM = df[&#39;VRAM&#39;].loc[df.index[2]]
  23. L1_RAM = df[&#39;RAM&#39;].loc[df.index[0]]
  24. L2_RAM = df[&#39;RAM&#39;].loc[df.index[1]]
  25. L3_RAM = df[&#39;RAM&#39;].loc[df.index[2]]
  26. L1_ROM = df[&#39;ROM&#39;].loc[df.index[0]]
  27. L2_ROM = df[&#39;ROM&#39;].loc[df.index[1]]
  28. L3_ROM = df[&#39;ROM&#39;].loc[df.index[2]]
  29. L1_CPU = df[&#39;CPU&#39;].loc[df.index[0]]
  30. L2_CPU = df[&#39;CPU&#39;].loc[df.index[1]]
  31. L3_CPU = df[&#39;CPU&#39;].loc[df.index[2]]
  32. L1_Price = df[&#39;Price&#39;].loc[df.index[0]]
  33. L2_Price = df[&#39;Price&#39;].loc[df.index[1]]
  34. L3_Price = df[&#39;Price&#39;].loc[df.index[2]]
  35. def L1_VRAM():
  36. return df[&#39;VRAM&#39;].loc[df.index[0]]
  37. def L2_VRAM():
  38. return df[&#39;VRAM&#39;].loc[df.index[1]]
  39. def L3_VRAM():
  40. return df[&#39;VRAM&#39;].loc[df.index[2]]
  41. def L1_RAM():
  42. return df[&#39;RAM&#39;].loc[df.index[0]]
  43. def L2_RAM():
  44. return df[&#39;RAM&#39;].loc[df.index[1]]
  45. def L3_RAM():
  46. return df[&#39;RAM&#39;].loc[df.index[2]]
  47. def L1_ROM():
  48. return df[&#39;ROM&#39;].loc[df.index[0]]
  49. def L2_ROM():
  50. return df[&#39;ROM&#39;].loc[df.index[1]]
  51. def L3_ROM():
  52. return df[&#39;ROM&#39;].loc[df.index[2]]
  53. def L1_CPU():
  54. return df[&#39;CPU&#39;].loc[df.index[0]]
  55. def L2_CPU():
  56. return df[&#39;CPU&#39;].loc[df.index[1]]
  57. def L3_CPU():
  58. return df[&#39;CPU&#39;].loc[df.index[2]]
  59. def L1_Price():
  60. return df[&#39;Price&#39;].loc[df.index[0]]
  61. def L2_Price():
  62. return df[&#39;Price&#39;].loc[df.index[1]]
  63. def L3_Price():
  64. return df[&#39;Price&#39;].loc[df.index[2]]
  65. csv = Element(&#39;csv&#39;)
  66. csv.write(L3_CPU())
  67. js.startScript()
  68. &lt;/py-script&gt;
  69. &lt;div id=&quot;main&quot; style=&quot;width: 600px;height:400px;&quot;&gt;&lt;/div&gt;

<!-- 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

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8" />
  5. 		<title>
  6. 			Read CSV with Pandas using PyScript
  7. 		</title>
  8. 		<script defer src="https://pyscript.net/latest/pyscript.js"></script>
  9. 		<script defer src="https://cdn.jsdelivr.net/pyodide/v0.23.4/full/pyodide.js"></script>
  10. 		<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  11. 		<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
  12. 	</head>
  13. 	<body>
  14. 		<py-config type="json">
  15. 			{
  16. 			"packages": ["pandas"]
  17. 			}
  18. 		</py-config>
  19. 		<py-script>
  20. 			import pandas as pd
  21. 			import numpy as np
  22. 			from pyodide.http import open_url
  23. 			url_content = open_url("https://raw.githubusercontent.com/linnlim/Laptop/main/Laptop.csv")
  24. 			df = pd.read_csv(url_content)
  26. 			L1_VRAM = df['VRAM'].loc[df.index[0]]
  27. 			L2_VRAM = df['VRAM'].loc[df.index[1]]
  28. 			L3_VRAM = df['VRAM'].loc[df.index[2]]
  30. 			L1_RAM = df['RAM'].loc[df.index[0]]
  31. 			L2_RAM = df['RAM'].loc[df.index[1]]
  32. 			L3_RAM = df['RAM'].loc[df.index[2]]
  34. 			L1_ROM = df['ROM'].loc[df.index[0]]
  35. 			L2_ROM = df['ROM'].loc[df.index[1]]
  36. 			L3_ROM = df['ROM'].loc[df.index[2]]
  38. 			L1_CPU = df['CPU'].loc[df.index[0]]
  39. 			L2_CPU = df['CPU'].loc[df.index[1]]
  40. 			L3_CPU = df['CPU'].loc[df.index[2]]
  42. 			L1_Price = df['Price'].loc[df.index[0]]
  43. 			L2_Price = df['Price'].loc[df.index[1]]
  44. 			L3_Price = df['Price'].loc[df.index[2]]
  46. 			def L1_VRAM():
  47. 				return df['VRAM'].loc[df.index[0]]
  48. 			def L2_VRAM():
  49. 				return df['VRAM'].loc[df.index[1]]
  50. 			def L3_VRAM():
  51. 				return df['VRAM'].loc[df.index[2]]
  53. 			def L1_RAM():
  54. 				return df['RAM'].loc[df.index[0]]
  55. 			def L2_RAM():
  56. 				return df['RAM'].loc[df.index[1]]
  57. 			def L3_RAM():
  58. 				return df['RAM'].loc[df.index[2]]
  60. 			def L1_ROM():
  61. 				return df['ROM'].loc[df.index[0]]
  62. 			def L2_ROM():
  63. 				return df['ROM'].loc[df.index[1]]
  64. 			def L3_ROM():
  65. 				return df['ROM'].loc[df.index[2]]
  67. 			def L1_CPU():
  68. 				return df['CPU'].loc[df.index[0]]
  69. 			def L2_CPU():
  70. 				return df['CPU'].loc[df.index[1]]
  71. 			def L3_CPU():
  72. 				return df['CPU'].loc[df.index[2]]
  74. 			def L1_Price():
  75. 				return df['Price'].loc[df.index[0]]
  76. 			def L2_Price():
  77. 				return df['Price'].loc[df.index[1]]
  78. 			def L3_Price():
  79. 				return df['Price'].loc[df.index[2]]
  80. 			js.startScript()
  81. 		</py-script>
  82. 		<div id="main" style="width: 600px;height:400px;"></div>
  84. 		<script>
  85. 		function startScript()
  86. 		{
  87. 		  setTimeout(makeChart, 0); // let the sequence that called startScript complete
  88. 		}
  90. 		function makeChart()
  91. 		{
  92. 		  var chartDom = document.getElementById('main');
  93. 		  var myChart = echarts.init(chartDom);
  94. 		  var option;
  95. 		  console.log(`In Python right now, x = ${pyscript.interpreter.globals.get('L1_CPU')()}`)
  96. 		  option = {
  97. 			title: {
  98. 			  text: 'Basic Radar Chart'
  99. 			},
  100. 			legend: {
  101. 			  data: ['Laptop 1', 'Laptop 2', 'Laptop 3']
  102. 			},
  103. 			radar: {
  104. 			  // shape: 'circle',
  105. 			  indicator: [{
  106. 				  name: 'VRAM',
  107. 				  max: 10
  108. 				},
  109. 				{
  110. 				  name: 'RAM',
  111. 				  max: 10
  112. 				},
  113. 				{
  114. 				  name: 'ROM',
  115. 				  max: 10
  116. 				},
  117. 				{
  118. 				  name: 'CPU',
  119. 				  max: 10
  120. 				},
  121. 				{
  122. 				  name: 'Price',
  123. 				  max: 10
  124. 				}
  125. 			  ]
  126. 			},
  127. 			series: [{
  128. 			  name: 'Laptop Specification',
  129. 			  type: 'radar',
  130. 			  data: [{
  131. 				  value: [
  132. 					Number(pyscript.interpreter.globals.get('L1_VRAM')()),
  133. 					Number(pyscript.interpreter.globals.get('L1_RAM')()),
  134. 					Number(pyscript.interpreter.globals.get('L1_ROM')()),
  135. 					Number(pyscript.interpreter.globals.get('L1_CPU')()),
  136. 					Number(pyscript.interpreter.globals.get('L1_Price')())
  137. 				  ],
  138. 				  name: 'Laptop 1'
  139. 				},
  140. 				{
  141. 				  value: [
  142. 					Number(pyscript.interpreter.globals.get('L2_VRAM')()),
  143. 					Number(pyscript.interpreter.globals.get('L2_RAM')()),
  144. 					Number(pyscript.interpreter.globals.get('L2_ROM')()),
  145. 					Number(pyscript.interpreter.globals.get('L2_CPU')()),
  146. 					Number(pyscript.interpreter.globals.get('L2_Price')())
  147. 				  ],
  148. 				  name: 'Laptop 2'
  149. 				},
  150. 				{
  151. 				  value: [
  152. 					Number(pyscript.interpreter.globals.get('L3_VRAM')()),
  153. 					Number(pyscript.interpreter.globals.get('L3_RAM')()),
  154. 					Number(pyscript.interpreter.globals.get('L3_ROM')()),
  155. 					Number(pyscript.interpreter.globals.get('L3_CPU')()),
  156. 					Number(pyscript.interpreter.globals.get('L3_Price')())
  157. 				  ],
  158. 				  name: 'Laptop 3'
  159. 				}
  160. 			  ]
  161. 			}]
  162. 		  };
  164. 		  option && myChart.setOption(option);
  165. 		}
  166. 		</script>
  167. 	</body>
  168. </html>
英文: 
  1. &lt;!DOCTYPE html&gt;
  2. &lt;html&gt;
  3. &lt;head&gt;
  4. &lt;meta charset=&quot;utf-8&quot; /&gt;
  5. &lt;title&gt;
  6. Read CSV with Pandas using PyScript
  7. &lt;/title&gt;
  8. &lt;script defer src=&quot;https://pyscript.net/latest/pyscript.js&quot;&gt;&lt;/script&gt;
  9. &lt;script defer src=&quot;https://cdn.jsdelivr.net/pyodide/v0.23.4/full/pyodide.js&quot;&gt;&lt;/script&gt;
  10. &lt;script src=&quot;https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js&quot;&gt;&lt;/script&gt;
  11. &lt;link rel=&quot;stylesheet&quot; href=&quot;https://pyscript.net/latest/pyscript.css&quot; /&gt;
  12. &lt;body&gt;
  13. &lt;py-config type=&quot;json&quot;&gt;
  14. {
  15. &quot;packages&quot;: [&quot;pandas&quot;]
  16. }
  17. &lt;/py-config&gt;
  18. &lt;py-script&gt;
  19. import pandas as pd
  20. import numpy as np
  21. from pyodide.http import open_url
  22. url_content = open_url(&quot;https://raw.githubusercontent.com/linnlim/Laptop/main/Laptop.csv&quot;)
  23. df = pd.read_csv(url_content)
  24. L1_VRAM = df[&#39;VRAM&#39;].loc[df.index[0]]
  25. L2_VRAM = df[&#39;VRAM&#39;].loc[df.index[1]]
  26. L3_VRAM = df[&#39;VRAM&#39;].loc[df.index[2]]
  27. L1_RAM = df[&#39;RAM&#39;].loc[df.index[0]]
  28. L2_RAM = df[&#39;RAM&#39;].loc[df.index[1]]
  29. L3_RAM = df[&#39;RAM&#39;].loc[df.index[2]]
  30. L1_ROM = df[&#39;ROM&#39;].loc[df.index[0]]
  31. L2_ROM = df[&#39;ROM&#39;].loc[df.index[1]]
  32. L3_ROM = df[&#39;ROM&#39;].loc[df.index[2]]
  33. L1_CPU = df[&#39;CPU&#39;].loc[df.index[0]]
  34. L2_CPU = df[&#39;CPU&#39;].loc[df.index[1]]
  35. L3_CPU = df[&#39;CPU&#39;].loc[df.index[2]]
  36. L1_Price = df[&#39;Price&#39;].loc[df.index[0]]
  37. L2_Price = df[&#39;Price&#39;].loc[df.index[1]]
  38. L3_Price = df[&#39;Price&#39;].loc[df.index[2]]
  39. def L1_VRAM():
  40. return df[&#39;VRAM&#39;].loc[df.index[0]]
  41. def L2_VRAM():
  42. return df[&#39;VRAM&#39;].loc[df.index[1]]
  43. def L3_VRAM():
  44. return df[&#39;VRAM&#39;].loc[df.index[2]]
  45. def L1_RAM():
  46. return df[&#39;RAM&#39;].loc[df.index[0]]
  47. def L2_RAM():
  48. return df[&#39;RAM&#39;].loc[df.index[1]]
  49. def L3_RAM():
  50. return df[&#39;RAM&#39;].loc[df.index[2]]
  51. def L1_ROM():
  52. return df[&#39;ROM&#39;].loc[df.index[0]]
  53. def L2_ROM():
  54. return df[&#39;ROM&#39;].loc[df.index[1]]
  55. def L3_ROM():
  56. return df[&#39;ROM&#39;].loc[df.index[2]]
  57. def L1_CPU():
  58. return df[&#39;CPU&#39;].loc[df.index[0]]
  59. def L2_CPU():
  60. return df[&#39;CPU&#39;].loc[df.index[1]]
  61. def L3_CPU():
  62. return df[&#39;CPU&#39;].loc[df.index[2]]
  63. def L1_Price():
  64. return df[&#39;Price&#39;].loc[df.index[0]]
  65. def L2_Price():
  66. return df[&#39;Price&#39;].loc[df.index[1]]
  67. def L3_Price():
  68. return df[&#39;Price&#39;].loc[df.index[2]]
  69. js.startScript()
  70. &lt;/py-script&gt;
  71. &lt;div id=&quot;main&quot; style=&quot;width: 600px;height:400px;&quot;&gt;&lt;/div&gt;
  72. &lt;script&gt;
  73. function startScript()
  74. {
  75. setTimeout(makeChart, 0); // let the sequence that called startScript complete
  76. }
  77. function makeChart()
  78. {
  79. var chartDom = document.getElementById(&#39;main&#39;);
  80. var myChart = echarts.init(chartDom);
  81. var option;
  82. console.log(`In Python right now, x = ${pyscript.interpreter.globals.get(&#39;L1_CPU&#39;)()}`)
  83. option = {
  84. title: {
  85. text: &#39;Basic Radar Chart&#39;
  86. },
  87. legend: {
  88. data: [&#39;Laptop 1&#39;, &#39;Laptop 2&#39;, &#39;Laptop 3&#39;]
  89. },
  90. radar: {
  91. // shape: &#39;circle&#39;,
  92. indicator: [{
  93. name: &#39;VRAM&#39;,
  94. max: 10
  95. },
  96. {
  97. name: &#39;RAM&#39;,
  98. max: 10
  99. },
  100. {
  101. name: &#39;ROM&#39;,
  102. max: 10
  103. },
  104. {
  105. name: &#39;CPU&#39;,
  106. max: 10
  107. },
  108. {
  109. name: &#39;Price&#39;,
  110. max: 10
  111. }
  112. ]
  113. },
  114. series: [{
  115. name: &#39;Laptop Specification&#39;,
  116. type: &#39;radar&#39;,
  117. data: [{
  118. value: [
  119. Number(pyscript.interpreter.globals.get(&#39;L1_VRAM&#39;)()),
  120. Number(pyscript.interpreter.globals.get(&#39;L1_RAM&#39;)()),
  121. Number(pyscript.interpreter.globals.get(&#39;L1_ROM&#39;)()),
  122. Number(pyscript.interpreter.globals.get(&#39;L1_CPU&#39;)()),
  123. Number(pyscript.interpreter.globals.get(&#39;L1_Price&#39;)())
  124. ],
  125. name: &#39;Laptop 1&#39;
  126. },
  127. {
  128. value: [
  129. Number(pyscript.interpreter.globals.get(&#39;L2_VRAM&#39;)()),
  130. Number(pyscript.interpreter.globals.get(&#39;L2_RAM&#39;)()),
  131. Number(pyscript.interpreter.globals.get(&#39;L2_ROM&#39;)()),
  132. Number(pyscript.interpreter.globals.get(&#39;L2_CPU&#39;)()),
  133. Number(pyscript.interpreter.globals.get(&#39;L2_Price&#39;)())
  134. ],
  135. name: &#39;Laptop 2&#39;
  136. },
  137. {
  138. value: [
  139. Number(pyscript.interpreter.globals.get(&#39;L3_VRAM&#39;)()),
  140. Number(pyscript.interpreter.globals.get(&#39;L3_RAM&#39;)()),
  141. Number(pyscript.interpreter.globals.get(&#39;L3_ROM&#39;)()),
  142. Number(pyscript.interpreter.globals.get(&#39;L3_CPU&#39;)()),
  143. Number(pyscript.interpreter.globals.get(&#39;L3_Price&#39;)())
  144. ],
  145. name: &#39;Laptop 3&#39;
  146. }
  147. ]
  148. }]
  149. };
  150. option &amp;&amp; myChart.setOption(option);
  151. }
  152. &lt;/script&gt;
  153. &lt;/body&gt;
  154. &lt;/html&gt;

huangapple
  • 本文由 发表于 2023年7月20日 22:28:52
  • 转载请务必保留本文链接：https://go.coder-hub.com/76730925.html
  • echarts
  • javascript
  • pyscript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定