Javascript 如何使用月度或年度图表显示数据库中的项目名称_Javascript_Php_Mysql_Chart.js

Javascript 如何使用月度或年度图表显示数据库中的项目名称

javascript php mysql chart.js

Javascript 如何使用月度或年度图表显示数据库中的项目名称,javascript,php,mysql,chart.js,Javascript,Php,Mysql,Chart.js,我正试图通过按月份和年份对项目进行分组来制作图表。我成功地在图表上显示了项目，而不是命名项目。我想要的是从表中检索数据名称项这是我的数据库和表结构： id（int）项目（varchar） mydate（日期） 1. 新的 2020-12-14 2. 出售 2020-11-16 3. 新的 2020-10-13 4. 取消 2020-09-15 5. 认可的 2019-07-16 6. 取消 2019-11-21 7. 出售 2019-08-29 8. 传送 2020-12-22 9 传送 2

我正试图通过按月份和年份对项目进行分组来制作图表。我成功地在图表上显示了项目，而不是命名项目。我想要的是从表中检索数据名称项

这是我的数据库和表结构：

id（int）项目（varchar） mydate（日期） 1. 新的 2020-12-14 2. 出售 2020-11-16 3. 新的 2020-10-13 4. 取消 2020-09-15 5. 认可的 2019-07-16 6. 取消 2019-11-21 7. 出售 2019-08-29 8. 传送 2020-12-22 9 传送 2018-11-14 10 新的 2018-06-12

您的SQL查询非常糟糕，无法读取。如果你用得太多，如果你用错了方法。只需使用本机函数

PDO示例

$host = 'localhost';
$username = 'root';
$password = '';
$db_name = 'market_db';

$conn = new PDO("mysql:host={$host};dbname={$db_name}", $username, $password);
$conn->exec("set names utf8");
$conn->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);

// trim for sql query, 01 -> 1
$_POST['month1'] = ltrim($_POST['month1'] ?: '1', '0');
$_POST['month2'] = ltrim($_POST['month2'] ?: '12', '0');

// By month

// only between months
if(isset($_POST['year1']) && $_POST['year1'] == null){
    $query = $conn->prepare("SELECT *, MONTHNAME(mydate) AS month_name, YEAR(mydate) AS year, COUNT(*) AS item_count 
    FROM mytable WHERE MONTH(mydate) BETWEEN :month1 AND :month2 GROUP BY MONTH(mydate)");

    $query->bindParam(':month1', $_POST['month1'], PDO::PARAM_INT);
    $query->bindParam(':month2', $_POST['month2'], PDO::PARAM_INT);
    $query->execute();
    $result_months = $query->fetchAll();
}
// between months with selected year
else {
    $query = $conn->prepare("SELECT *, MONTHNAME(mydate) AS month_name, YEAR(mydate) AS year, COUNT(*) AS item_count 
    FROM mytable WHERE MONTH(mydate) BETWEEN :month1 AND :month2 AND YEAR(mydate) = :year1 GROUP BY MONTH(mydate)");

    $query->bindParam(':month1', $_POST['month1'], PDO::PARAM_INT);
    $query->bindParam(':month2', $_POST['month2'], PDO::PARAM_INT);
    $query->bindParam(':year1', $_POST['year1'], PDO::PARAM_INT);
    $query->execute();
    $result_months = $query->fetchAll();
}

然后打印为json数组

const byMonthData = [<?php foreach($result_months as $item) echo json_encode($item).','?>];

完整示例

const byMonthData = [<?php foreach($result_months as $item) echo json_encode($item).','?>];

var ctx = document.getElementById("myChart_month");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: byMonthData.map(function (item) {
            return [
                [`${item.month_name} ${item.year}`],
                [`Item: ${item.item}`]
            ]
        }),
        datasets: [{
            label: "item",
            data: byMonthData.map(function (item) {
                return item.item_count
            }),
            backgroundColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)',
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)',
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        },
    }
});

constbymonthdata=[]；
var ctx=document.getElementById（“myChart_month”）；
var myChart=新图表（ctx{
类型：'bar'，
数据：{
标签：byMonthData.map（函数（项）{
返回[
[`${item.month\u name}${item.year}`]，
[`Item:${Item.Item}`]
]
}),
数据集：[{
标签：“物品”，
数据：byMonthData.map（函数（项）{
返回项目。项目\u计数
}),
背景颜色：[
"rgba(255,99,132,1)",，
“rgba（54162235,1）”，
"rgba(255,206,86,1)",，
"rgba(751921921)",，
"rgba(153102255,1)",，
"rgba(255,159,64,1)",，
"rgba(255,99,132,1)",，
“rgba（54162235,1）”，
"rgba(255,206,86,1)",，
"rgba(751921921)",，
"rgba(153102255,1)",，
‘rgba（255、159、64、1）’
],
边框颜色：[
"rgba(255,99132,1)",，
“rgba（54162235,1）”，
"rgba(255,206,86,1)",，
"rgba(751921921)",，
"rgba(153102255,1)",，
"rgba(255,159,64,1)",，
"rgba(255,99132,1)",，
“rgba（54162235,1）”，
"rgba(255,206,86,1)",，
"rgba(751921921)",，
"rgba(153102255,1)",，
‘rgba（255、159、64、1）’
],
边框宽度：1
}]
},
选项：{
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的
}
}]
},
}
});

结果

您的SQL查询非常糟糕，无法读取。如果你用得太多，如果你用错了方法。只需使用本机函数

PDO示例

$host = 'localhost';
$username = 'root';
$password = '';
$db_name = 'market_db';

$conn = new PDO("mysql:host={$host};dbname={$db_name}", $username, $password);
$conn->exec("set names utf8");
$conn->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);

// trim for sql query, 01 -> 1
$_POST['month1'] = ltrim($_POST['month1'] ?: '1', '0');
$_POST['month2'] = ltrim($_POST['month2'] ?: '12', '0');

// By month

// only between months
if(isset($_POST['year1']) && $_POST['year1'] == null){
    $query = $conn->prepare("SELECT *, MONTHNAME(mydate) AS month_name, YEAR(mydate) AS year, COUNT(*) AS item_count 
    FROM mytable WHERE MONTH(mydate) BETWEEN :month1 AND :month2 GROUP BY MONTH(mydate)");

    $query->bindParam(':month1', $_POST['month1'], PDO::PARAM_INT);
    $query->bindParam(':month2', $_POST['month2'], PDO::PARAM_INT);
    $query->execute();
    $result_months = $query->fetchAll();
}
// between months with selected year
else {
    $query = $conn->prepare("SELECT *, MONTHNAME(mydate) AS month_name, YEAR(mydate) AS year, COUNT(*) AS item_count 
    FROM mytable WHERE MONTH(mydate) BETWEEN :month1 AND :month2 AND YEAR(mydate) = :year1 GROUP BY MONTH(mydate)");

    $query->bindParam(':month1', $_POST['month1'], PDO::PARAM_INT);
    $query->bindParam(':month2', $_POST['month2'], PDO::PARAM_INT);
    $query->bindParam(':year1', $_POST['year1'], PDO::PARAM_INT);
    $query->execute();
    $result_months = $query->fetchAll();
}

然后打印为json数组

const byMonthData = [<?php foreach($result_months as $item) echo json_encode($item).','?>];

完整示例

const byMonthData = [<?php foreach($result_months as $item) echo json_encode($item).','?>];

var ctx = document.getElementById("myChart_month");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: byMonthData.map(function (item) {
            return [
                [`${item.month_name} ${item.year}`],
                [`Item: ${item.item}`]
            ]
        }),
        datasets: [{
            label: "item",
            data: byMonthData.map(function (item) {
                return item.item_count
            }),
            backgroundColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)',
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)',
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        },
    }
});

constbymonthdata=[]；
var ctx=document.getElementById（“myChart_month”）；
var myChart=新图表（ctx{
类型：'bar'，
数据：{
标签：byMonthData.map（函数（项）{
返回[
[`${item.month\u name}${item.year}`]，
[`Item:${Item.Item}`]
]
}),
数据集：[{
标签：“物品”，
数据：byMonthData.map（函数（项）{
返回项目。项目\u计数
}),
背景颜色：[
"rgba(255,99,132,1)",，
“rgba（54162235,1）”，
"rgba(255,206,86,1)",，
"rgba(751921921)",，
"rgba(153102255,1)",，
"rgba(255,159,64,1)",，
"rgba(255,99,132,1)",，
“rgba（54162235,1）”，
"rgba(255,206,86,1)",，
"rgba(751921921)",，
"rgba(153102255,1)",，
‘rgba（255、159、64、1）’
],
边框颜色：[
"rgba(255,99132,1)",，
“rgba（54162235,1）”，
"rgba(255,206,86,1)",，
"rgba(751921921)",，
"rgba(153102255,1)",，
"rgba(255,159,64,1)",，
"rgba(255,99132,1)",，
“rgba（54162235,1）”，
"rgba(255,206,86,1)",，
"rgba(751921921)",，
"rgba(153102255,1)",，
‘rgba（255、159、64、1）’
],
边框宽度：1
}]
},
选项：{
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的
}
}]
},
}
});

结果

我不知道如何使用PDO。我已经试过了，图表甚至没有appear@SctoDraig检查这个完整的例子，我不知道如何使用PDO。我已经试过了，图表甚至没有appear@SctoDraig检查这个完整的例子，