csv文件导致Dygraph抛出无法读取未定义的属性(阅读“推送”)错误

xeufq47z  于 2023-01-18  发布在  其他
关注(0)|答案(1)|浏览(109)

我使用dygraph来显示来自不同sqlite3数据库的数据,因为我不知道更好,我使用Python从数据库创建一个csv文件,然后dygraph使用。使用完全相同的Python代码来显示不同的数据库,图形显示良好。但这个数据库有问题(存储来自太阳能电池板充电控制器的数据)我得到上面的“未定义”错误。Google暗示这是因为DyGraph脚本运行时没有声明某个变量。我使用的同一个JS可以处理不同的csv文件,所以我只能假设它是csv文件或数据库。我已经在Excel和Google Docs中测试了csv文件,它加载和外观都很好。
所以,有什么想法吗?
以下是图表尝试加载时的Chrome控制台错误消息:

Uncaught TypeError: Cannot read properties of undefined (reading 'push')
    at Q.visibility (dygraph.min.js:4:26567)
    at Q.getPropertiesForSeries (dygraph.min.js:4:889)
    at o.generateLegendHTML (dygraph.min.js:5:13732)
    at o.deselect (dygraph.min.js:5:13159)
    at Q.cascadeEvents_ (dygraph.min.js:3:25191)
    at Q.clearSelection (dygraph.min.js:4:10470)
    at Q.mouseOut_ (dygraph.min.js:4:10406)
    at mouseOutHandler_ (dygraph.min.js:3:30272)

下面是用于显示Dygraph的HTML / JS(nrg_chart是一个保持器,用于在第一个图表工作后显示第二个图表):

<html><head>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/dygraph/2.1.0/dygraph.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/dygraph/2.1.0/dygraph.min.css" />
</head><body>
<div class="container" style="display: flex; height: 350px;">
    <div id="solar_chart" style="width: 50%; height:350px;">
    </div>
    <div id="nrg_chart" style="flex-grow: 1; height:350px;">
    </div>
</div>
<script type="text/javascript">
  solchart = new Dygraph(
    document.getElementById('solar_chart'),
    "solarpwr.csv", {
      title: ['Solar Generation'],
      visibility: [true],
      axes: {
        x: {
        },
        y: {
          drawGrid: false
        }
      }
    });
</script>
</body></html>

然后作为参考,这是我用来创建csv文件的糟糕的python代码,但它适用于另一个数据库,所以我不认为这是问题所在:

import csv
import sqlite3
import pandas as pd

conn = sqlite3.connect('/home/pi/restapi/database.db',detect_types=sqlite3.PARSE_DECLTYPES | sqlite3.PARSE_COLNAMES)
cursor = conn.cursor()
cursor.execute("select battery_percentage, load_current, load_power, pv_current, pv_power, date from solarnrg;")
with open('/var/www/html/solarpwr.csv', 'w',newline='') as csv_file:
    csv_writer = csv.writer(csv_file)
    csv_writer.writerow([i[0] for i in cursor.description])
    csv_writer.writerows(cursor)
conn.close()

csv_data = pd.read_csv('/var/www/html/solarpwr.csv', usecols=[0,1,2,3,4,5])
col = csv_data.pop("date")
csv_data.insert(0, col.name, col)
csv_data.to_csv('/var/www/html/solarpwr.csv', index = False)

如果你想看看数据库和csv文件,这里有:Gofile links

bxpogfeg

bxpogfeg1#

visibility选项是一个布尔值数组,每个数据序列对应一个布尔值。您的CSV文件有五个序列(六列),但visibility数组只有一个,这就是为什么您会得到错误。

solchart = new Dygraph(
  document.getElementById('solar_chart'),
  "solarpwr.csv", {
    title: 'Solar Generation',
    visibility: [true, false, false, false, false],
    axes: {
      x: {
      },
      y: {
        drawGrid: false
      }
    }
  });

(The title选项应该是字符串,而不是数组,但这似乎可以正常工作。)

相关问题