数组不适用于chart.js

时间:2019-07-19 20:08:26

标签: javascript chart.js

感谢您的阅读和与我共度时光。当我使用括号内的标签和数据值时,例如[“ pollo”,“ acqua”,“ verdure”]和[32、25、14],绘制了图形,但是如果我用数组替换这些值,则不会绘制任何图形。 chart.js版本= 2.8怎么了?预先感谢。

const http = require('http');
const mysql = require('mysql');
var Chart = require('chart.js');

const pool = mysql.createPool({
  host: '127.0.0.1',
  user: 'andrea',
  password: 'password',
  database: 'spesa',
  charset: 'utf8'
});

//html string that will be send to browser
var template ="<html><head><title>Grafici Analisi Spesa</title><script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js'></script></head><body><h1>Grafici Analisi Spesa</h1>{${table}}</body></html>";

var sqlQuery ='SELECT articolo,SUM(quantita)as quantita FROM registro GROUP BY articolo ORDER BY SUM(quantita) DESC LIMIT 0, 6';

function setResHtml(sql, cb){
    pool.getConnection((err, con)=>{
        if(err) throw err;

        //con.query(sql+con.escape(idAlunno), (err, res, cols)=>{
        con.query(sql, (err, res, cols)=>{
            if(err) throw err;

            var table = '';
            var articoli = new Array();
            var totQuantita = new Array();

            //create html table with data from res.
            for (var i = 0; i < res.length; i++) {
                articoli.push(res[i].articolo);
                totQuantita.push(res[i].quantita);
                console.log(articoli[i] + " " + totQuantita[i]);
            }

            table = `<canvas id="myChart" width="400" height="400" ></canvas>`;
            table+=`<script>
            var barData = {
                labels : articoli,
                datasets : [

                    {
                        fillColor : "rgba(73,188,170,0.4)",
                        strokeColor : "rgba(72,174,209,0.4)",
                        data : totQuantita
                    }
                ]
            }
            // get bar chart canvas
            var myChart = document.getElementById("myChart").getContext("2d");
            // draw bar chart
            new Chart(myChart).Bar(barData);
            </script>`;

            con.release();

            return cb(table);
        });
    });
}

//create the server for browser access
const server = http.createServer((req, res)=>{
  setResHtml(sqlQuery, resql=>{
    reo = template.replace('{${table}}', resql);
    res.writeHead(200, {'Content-Type':'text/html; charset=utf-8'});
    res.write(reo, 'utf-8');
    res.end();
  });
}).listen(8081);

0 个答案:

没有答案