如何通过Chartjs从PostgreSQL数据库获取数据并绘制数据图

cclgggtu  于 2022-12-26  发布在  PostgreSQL
关注(0)|答案(1)|浏览(149)

我有一个index.js与本地主机连接到我的数据库,我可以在consol.log中打印一个查询与我的表的值。

    • 输入**
const {Client} = require('pg');

dotenv.config();

const client = new Client({
host: 'localhost',
user: 'postgres',
port: '5432',
password: 'mypassword',
database: 'mydatabase'
});

client.connect();

client.query('SELECT year FROM year_price_housing ', (err, res) => {
    if(!err){
        console.log(res.rows);
    }else {
        console.log(err.message);
    }
    client.end();
})

client.query('SELECT price FROM year_price_housing ', (err, res) => {
    if(!err){
        console.log(res.rows);
    }else {
        console.log(err.message);
    }
    client.end();
})
    • 输出**

但我如何发送这个查询到我的chartJS,它在我的index.html,我的想法是改变我的查询的X和Y随机值(x =年和y =价格)

    • 输入**
<section class="chart-container" id="main-price-chart">
  <canvas id="myChart" ></canvas>

  <script>
    var xValues = [50,60,70,80,90,100,110,120,130,140,150];
    var yValues = [7,8,8,9,9,9,10,11,14,14,15];
    
    new Chart("myChart", {
      type: "line",
      data: {
        labels: xValues,
        datasets: [{
          fill: false,
          lineTension: 0,
          backgroundColor: "rgba(0,0,255,1.0)",
          borderColor: "rgba(0,0,255,0.1)",
          data: yValues
        }]
      },
      options: {
        legend: {display: true},
        scales: {
          yAxes: [{ticks: {min: 6, max:16}}],
        }
      }
    });
    </script>
</section>
    • 输出**
ergxz8rk

ergxz8rk1#

不打印,而是赋值给变量
something like: var xValues = res.rows.map((val) => val.year);
(我脑中写的,没考)
你也可以阅读关于获取异步数据的文章,有很多例子。
你可能要先检查文档https://github.com/chartjs/Chart.js

相关问题