將數據從數據庫導入到JS文件

Question

我是.js文件及其使用的新手，我正在嘗試更新使用JS的圖表。 我需要或嘗試做的是從數據庫中導入信息，以便在JS文件中使用它來填充圖表。 這是圖表代碼和文件名。

檔案名稱charjs_custom.js

/*Polar chart*/
    var polarElem = document.getElementById("polarChart");

    var data3 = {
        datasets: [{
            data: [
                20,
                16,
                7,
                3,
                40
            ],
            backgroundColor: [
                "#7E81CB",
                "#1ABC9C",
                "#B8EDF0",
                "#B4C1D7",
                "#01C0C8"
            ],
            hoverBackgroundColor: [
                "#a1a4ec",
                "#2adab7",
                "#a7e7ea",
                "#a5b0c3",
                "#10e6ef"
            ],
            label: 'My dataset' // for legend
        }],
        labels: [
            "Blue",
            "Green",
            "Light Blue",
            "grey",
            "Sea Green"
        ]
    };

    new Chart(polarElem, {
        data: data3,
        type: 'polarArea',
        options: {
            elements: {
                arc: {
                    borderColor: ""
                }
            }
        }
    });

我需要使用數據庫中的信息來更改“數據”和“標簽”部分，根據已閱讀的內容，我需要創建一個php文件來檢索信息，但是如何將其轉換為JS以及如何告訴它哪些信息在JS文件中使用。 同時鏈接“數據”和“標簽”部分，以便信息與我的表相對應

我要使用的表是：make：id〜count

文件名chart_test.php

<?php

//database
$host="my_host"; // Host name 
$username="my_username"; // Mysql username 
$password="my_password"; // Mysql password 
$db_name="my_database"; // Database name 

//get connection
$mysqli = new mysqli($host, $username, $password, $db_name);

if(!$mysqli){
    die("Connection failed: " . $mysqli->error);
}

//query to get data from the table
$query = sprintf("SELECT * FROM bureau GROUP BY make ");

//execute query
$result = $mysqli->query($query);

//close connection
$mysqli->close();

//now print the data
 print json_encode($data);

 ?>

Answer 1

您可以使用JSON格式在php后端和js前端之間交換數據。 但是，我敦促您將nodejs用作后端服務。 它將與您的js代碼無縫集成。

Answer 2

在不真正了解您的數據源的情況下，它通常會像下面這樣工作。

<?php
// Lets say your managed to convert your data from your database into something like.
$graph = [
    'data'       => [20, 16, 7, 3, 40],
    'background' => ['#7E81CB', '#1ABC9C', '#B8EDF0', '#B4C1D7', '#01C0C8'],
    'hover'      => ['#a1a4ec', '#2adab7', '#a7e7ea', '#a5b0c3', '#10e6ef'],
    'labels'     => ['Blue', 'Green', 'Light Blue', 'Grey', 'Sea Green']
];

?>

var polarElem = document.getElementById("polarChart");

var data3 = {
    datasets: [{
        data: <?php echo json_encode($graph['data']); ?>,
        backgroundColor: <?php echo json_encode($graph['background']); ?>,
        hoverBackgroundColor: <?php echo json_encode($graph['hover']); ?>,
        label: 'My dataset'
    }],
    labels: <?php echo json_encode($graph['labels']); ?>
};

Answer 3

因此，如果我了解數據庫的映射，我會這樣做：

<?php
//database
$host="my_host"; // Host name 
$username="my_username"; // Mysql username 
$password="my_password"; // Mysql password 
$db_name="my_database"; // Database name 

//get connection
$mysqli = new mysqli($host, $username, $password, $db_name);

if(!$mysqli){
    die("Connection failed: " . $mysqli->error);
}

//query to get data from the table
$query = sprintf("SELECT * FROM bureau GROUP BY make ");

//execute query
$result = $mysqli->query($query);


// Define configuration array
$config = array(
   'datasets' => array(
        array(
            'data' => array(),
            'backgroundColor' => array(), // This could be statically loaded, or dynamic if the DB has colors
            'hoverBackgroundColor' => array(), // This could be statically loaded, or dynamic if the DB has colors
            'label' => 'My Dataset'
        )
    ),
    'labels' => array()
);

// Loop through database result and add
while($row=mysqli_fetch_assoc($result)){
    array_push($config['labels'], $row['make']); // Add label
    array_push($config['datasets'][0]['data'], $row['totalValue']); // Add value
}

//close connection
$mysqli->close();

//now print the data
echo json_encode($config);

您最終對該配置執行的操作取決於您如何加載此圖表。 這可能是一個AJAX請求，然后您將使用結果代替data3例如：

$.get( "chart_test.php", function( data ) {
    new Chart(polarElem, {
        data: data,
        type: 'polarArea',
        options: {
            elements: {
                arc: {
                    borderColor: ""
                }
            }
        }
    });
}, "json" );

或嵌入到php文件中，而不是打印json_encode($config); 您將創建整個腳本：

new Chart(polarElem, {
        data: <?= json_encode($config) ?>,
        type: 'polarArea',
        options: {
            elements: {
                arc: {
                    borderColor: ""
                }
            }
        }
    });

這完全取決於您到目前為止的設置。