Question

我想创建直接链接到PostgreSQL数据库的动态图形。

目前，我在条形图上取得了成功，但在包括雷达在内的其他类型的图表上却很复杂。

我的目标是获得一个IRIS（iri_code），一个关于3个相对变量（txact，txchom，pop_txevol）的简介，如下图所示

首先，这是我的PHP（data_radar.php）

<?php

$dbconn = pg_connect("host='' dbname='' user='' password=''")
or die('Erreur de connexion'.pg_last_error());

$query = "SELECT iri_code, iri_pop_txevol, iri_txact, iri_txchom FROM demo_geo.demo_iris_view WHERE iri_code = '352380801'";
$result = pg_query($query) or die('Query failed: ' . pg_last_error());

$array = array();
while ($row = pg_fetch_array($result, null, PGSQL_ASSOC)) {
    $array[] = $row;
}

$data=json_encode($array);
echo $data;

pg_free_result($result);

pg_close($dbconn);

?>

它有效，这是json输出

[{"iri_code":"352380801","iri_pop_txevol":"3.1","iri_txact":"69.5","iri_txchom":"9.8"}]

但我不明白如何在JS部分设置图形。 json的结构好吗？

$(document).ready(function() {

    $.ajax({
        url : "http://localhost/test_a/data_radar.php",
        type : "GET",
        dataType: 'json',
        success : function(data){
            console.log(data);

            var irisA = [];
            var txact = [];
            var txchom = [];
            var txevol = [];

            for(var i in data) {
                irisA.push(data[i].iri_code);
                txact.push(data[i].iri_txact);
                txchom.push(data[i].iri_txchom);
                txevol.push(data[i].iri_pop_txevol);
            }

            var ctx1 = $("#canvas-radar");

            var data1 = {
                labels : [txact, txchom, txevol],
                datasets : [
                    {
                        label : "IRIS",
                        data : irisA,
                        backgroundColor: "rgba(179,181,198,0.2)",
                        borderColor: "rgba(179,181,198,1)",
                        pointBackgroundColor: "rgba(179,181,198,1)",
                        pointBorderColor: "#fff",
                        pointHoverBackgroundColor: "#fff",
                        pointHoverBorderColor: "rgba(179,181,198,1)"
                    }
                ]
            };

            var options = {
                title : {
                    display : true,
                    position : "top",
                    text : "Radar test",
                    fontSize : 14,
                    fontColor : "#111"
                },
                legend : {
                    display : true,
                    position : "bottom"
                }
            };


            var chart1 = new Chart( ctx1, {
                type : "radar",
                data : data1,
                options : options
            });

        },
        error : function(data) {
            console.log(data);
        }
    });

});

这是它给出的内容

radar chart bug

我搜索了论坛，但我承认我还不舒服，如果有人可以启发我加快学习，那将是非常好的

提前谢谢你，美好的一天！

Answer 1

以下是你如何实现这一目标......

let json = [{ "iri_code": "352380801", "iri_pop_txevol": "3.1", "iri_txact": "69.5", "iri_txchom": "9.8" }, { "iri_code": "352380703", "iri_pop_txevol": "23.0", "iri_txact": "15.3", "iri_txchom": "29.8" }];
let label = [];
let data = [];

// generate label and data dynamically
json.forEach(e => {
    label.push(e.iri_code);
    data.push([+e.iri_pop_txevol, +e.iri_txact, +e.iri_txchom]);
});

let ctx = document.querySelector('#canvas').getContext('2d');
let chart = new Chart(ctx, {
    type: 'radar',
    data: {
        labels: ['txevol', 'txact', 'txchom'],
        datasets: [{
            label: label[0],
            data: data[0],
            backgroundColor: 'rgba(0,119,204,0.2)',
            borderColor: 'rgba(0,119,204, 0.5)',
            borderWidth: 1,
            pointBackgroundColor: 'rgba(0, 0, 0, 0.5)'
        }, {
            label: label[1],
            data: data[1],
            backgroundColor: 'rgba(255, 0, 0 ,0.15)',
            borderColor: 'rgba(255, 0, 0 ,0.45)',
            borderWidth: 1,
            pointBackgroundColor: 'rgba(0, 0, 0, 0.5)'
        }]
    },
    options: {
        title: {
            display: true,
            position: "top",
            text: "Radar test",
            fontSize: 14,
            fontColor: "#111"
        },
        legend: {
            display: true,
            position: "bottom"
        },
        scale: {
            pointLabels: {
                fontSize: 11
            }
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="canvas"></canvas>

Chart.js，PHP和雷达图表标签

1 个答案: