Hallo :) (Ich bin Anfänger und ich lerne auf dem Arbeitsmarkt),Chart.js jQuery Dropdown ausgewählte Werte
ich mit Chart.js arbeiten, jQuery, PostgreSQL
Zur Zeit habe ich ein Balkendiagramm direkt mit PostgreSQL-Datenbank verknüpft.
Ich möchte ein Dropdown-Menü hinzufügen, damit der Benutzer eine "Zone" auswählen kann, die das Diagramm dynamisch aktualisiert.
Jede "Zone" hat verschiedene Variablen: Bevölkerung, Gehälter (Anzahl der Beschäftigten in Englisch) usw.
Hier ist die 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);
?>
ich folgende Array erhalten
[{"id":"1","zone_nom":"test ","zone_pop":"36105","zone_salaries":"15279"},{...],{...}]
Dann erzeuge ich eine Dropdownliste dynamisch von meiner Tabelle
Aber ich bin fest, wie die ausgewählten Werte in der Tabelle passieren (und dann stellen Sie sicher, dass das Diagramm aktualisiert wird in der Dropdown-Liste von der Wahl abhängig)
<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>
Der Wert der Wahl zurückgegeben
$("#zone-select").change(function(){
var value = $("#zone-select option:selected").val(); // Value of selected option
console.log('Value: '+value);
});
ich suche aber ich kann nicht die Lösung für jetzt (wahrscheinlich nicht sehr kompliziert)
Vielen Dank im Voraus für Ihre Hilfe finden
Ich verstehe das meiste von dem, wonach Sie suchen, es ist jedoch unklar, wie Sie die Darstellung des Diagramms basierend auf dem ausgewählten Dropdown-Wert ändern können. Können Sie im Diagrammcode anzeigen, wie Sie erwarten, dass die Daten basierend auf dieser Auswahl gefiltert werden? – mjw