Question

你好:)（我是新手，我在工作中学习），

我使用Chart.js，jQuery，PostgreSQL

目前我有一个直接链接到PostgreSQL数据库的条形图。

我想添加一个下拉列表，允许用户选择一个“区域”，这将动态更新图表。

每个“区域”都有不同的变量：人口，工资（英语雇员人数）等。

这是PHP

<?php

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

$query = "SELECT id, zone_nom, zone_pop, zone_salaries FROM table";
$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);

?>

我得到以下数组

[{"id":"1","zone_nom":"test ","zone_pop":"36105","zone_salaries":"15279"},{...],{...}]

然后我生成一个由我的表

动态填充的下拉列表

但我仍然坚持如何在图表中传递选定的值（然后确保根据下拉列表中的选项刷新图表）

<html>
<head>
    <title>Liste déroulante dynamique</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/Chart.min.js"></script>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.3/leaflet.css" />
    <script src="http://cdn.leafletjs.com/leaflet/v1.0.3/leaflet-src.js"></script>
    <script type="text/javascript">
        function Zone() {
            $('#zone-select').empty();
            $('#zone-select').append("<option>Chargement</option>");
            $.ajax({
                type: "POST",
                url: "http://localhost/data.php",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(data){
                    $('#zone-select').empty();
                    $('#zone-select').append("<option value='0'>-- Select zone --</option>");
                    $.each(data,function(i, item){
                        $('#zone-select').append('<option value='+data[i].zone_pop+'>'+data[i].zone_nom+'</option>');
                    });

                    $("#zone-select").change(function(){
                        var value = $("#zone-select option:selected").val(); // Value of selected option
                        console.log('Value: '+value);
                    });

            // How to link the dropdown and the chart ?        

            var zoneNom = [];
            var zonePop = [];
            for(var i in data) {
                zoneNom.push(data[i].zone_nom);
                zonePop.push(data[i].zone_pop);
                zoneSalaries.push(data[i].zone_salaries)
            }
            var chartdata = {
                labels: zoneNom,
                datasets : [
                    {
                        label: 'Population',
                        backgroundColor: 'rgba(200, 200, 200, 0.75)',
                        borderColor: 'rgba(200, 200, 200, 0.75)',
                        hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
                        hoverBorderColor: 'rgba(200, 200, 200, 1)',
                        data: zonePop
                    },
                    {
                        label: 'Salaries',
                        backgroundColor: 'rgba(200, 200, 200, 0.75)',
                        borderColor: 'rgba(200, 200, 200, 0.75)',
                        hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
                        hoverBorderColor: 'rgba(200, 200, 200, 1)',
                        data: zoneSalaries
                    }
                ]
            };

            var option = {};
            var ctx = $("#mycanvas");
            var barGraph = new Chart(ctx, {
                type: 'bar',
                data: chartdata,
                options: option
            });
                    var myBarChart;

                },
                complete: function(){
                }
            });
        }
        $(document).ready(function(){
            Zone();
        });  

    </script>
</head>
<body>
    <select id="zone-select"></select>
    <div id="chart-container">
            <canvas id="mycanvas"></canvas>
    </div>
</body>
</html>

返回选择的值

$("#zone-select").change(function(){
   var value = $("#zone-select option:selected").val(); // Value of selected option
   console.log('Value: '+value);
});

我正在寻找，但我现在找不到解决方案（可能不是很复杂）

提前感谢您的帮助

Answer 1

您可以使用以下有关下拉菜单的更改事件处理函数来完成此操作...

$("#zone-select").change(function() {
   var nom = $("#zone-select option:selected").text(); // name of selected option
   var index = zoneNom.indexOf(nom);
   var new_labels = [zoneNom[index]];
   var new_data1 = [zonePop[index]];
   var new_data2 = [zoneSalaries[index]];
   barGraph.data.labels = new_labels;
   barGraph.data.datasets[0].data = new_data1;
   barGraph.data.datasets[1].data = new_data2;
   barGraph.update(); // update chart
});

并且，如果您希望默认选择第一个选项，请使用...

$("#zone-select").val(zonePop[0]).trigger('change');

工作示例

＆＃13;

function Zone() {
   $('#zone-select').empty();
   $('#zone-select').append("<option>Chargement</option>");
   $.ajax({
      type: "GET",
      url: "https://istack.000webhostapp.com/json/t9.json",
      dataType: "json",
      success: function(data) {
         //console.log(data)
         $('#zone-select').empty();
         $('#zone-select').append("<option value='0'>-- Select zone --</option>");
         $.each(data, function(i, item) {
            $('#zone-select').append('<option value=' + data[i].zone_pop + '>' + data[i].zone_nom + '</option>');
         });

         $("#zone-select").change(function() {
            var nom = $("#zone-select option:selected").text(); // name of selected option
            var index = zoneNom.indexOf(nom);
            var new_labels = [zoneNom[index]];
            var new_data1 = [zonePop[index]];
            var new_data2 = [zoneSalaries[index]];
            barGraph.data.labels = new_labels;
            barGraph.data.datasets[0].data = new_data1;
            barGraph.data.datasets[1].data = new_data2;
            barGraph.update(); // update chart
         });

         var zoneNom = [];
         var zonePop = [];
         var zoneSalaries = [];
         for (var i in data) {
            zoneNom.push(data[i].zone_nom);
            zonePop.push(data[i].zone_pop);
            zoneSalaries.push(data[i].zone_salaries)
         }
         var chartdata = {
            labels: zoneNom,
            datasets: [{
               label: 'Population',
               backgroundColor: 'rgba(200, 200, 200, 0.75)',
               borderColor: 'rgba(200, 200, 200, 0.75)',
               hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
               hoverBorderColor: 'rgba(200, 200, 200, 1)',
               data: zonePop
            }, {
               label: 'Salaries',
               backgroundColor: 'rgba(200, 200, 200, 0.75)',
               borderColor: 'rgba(200, 200, 200, 0.75)',
               hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
               hoverBorderColor: 'rgba(200, 200, 200, 1)',
               data: zoneSalaries
            }]
         };

         var option = {
            scales: {
               yAxes: [{
                  ticks: {
                     beginAtZero: true
                  }
               }]
            }
         };
         var ctx = $("#mycanvas");
         var barGraph = new Chart(ctx, {
            type: 'bar',
            data: chartdata,
            options: option
         });
         var myBarChart;

         $("#zone-select").val(zonePop[0]).trigger('change'); // select first option

      },
      complete: function() {}
   });
}
$(document).ready(function() {
   Zone();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<select id="zone-select"></select>
<div id="chart-container">
   <canvas id="mycanvas"></canvas>
</div>

＆＃13;

Chart.js jQuery下拉列表选中的值

1 个答案: