Chart.js jQuery下拉选择的值 [英] Chart.js jQuery dropdown selected values
本文介绍了Chart.js jQuery下拉选择的值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
你好:)（我是新手，我在工作中学习）
我使用Chart.js，jQuery，PostgreSQL
当前，我有一个直接链接到PostgreSQL数据库的条形图。
我想添加一个下拉列表，以允许用户选择
每个区域具有不同的变量：人口，工资（英语雇员人数）等。
p>这是PHP
<？php
$ dbconn = pg_connect（）
或死（'Erreur de connexion'.pg_last_error（））;
$ query =从表中选择id，zone_nom，zone_pop，zone_salaries；
$ result = pg_query（$ query）或die（’查询失败：’。pg_last_error（））;
$ array = array（）;
而（$ 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> Listedéroulantedynamique< / 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>
函数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，
成功：function（data）{
$（'＃zone-select'）。empty（）;
$（ '＃zone-select'）。append（< option value ='0'>-选择区域-< / 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（）; //所选选项的值
console.log（'Value：'+ value）;
}）;
//如何链接下拉菜单和图表？
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 = {
标签：zoneNom，
数据集：[
{
标签：'人口'，
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）'，
数据：zonePop
}，
{
标签：'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） ’，
数据：zoneSalaries
}
]
};
var选项= {};
var ctx = $（＃mycanvas）;
var barGraph = new Chart（ctx，{
type：‘bar’，
data：chartdata，
options：option
}）;
var myBarChart;
}，
完成：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（）; //所选选项的值
console.log（'Value：'+ value）;
}）;
我正在寻找，但暂时找不到解决方案（可能不太复杂）
预先感谢您的帮助
解决方案
您可以使用以下是下拉菜单的更改事件处理程序函数...
$（＃zone-select）。change（ function（）{
var nom = $（＃zone-select option：selected）。text（）; //所选选项的名称
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（）; //更新图表
}）；
，如果您希望默认选择第一个选项，请使用...
$（＃zone-select）。val（zonePop [0]）。trigger（'change'）;
工作示例
< pre class = snippet-code-js lang-js prettyprint-override>
function Zone（）{$（'＃zone-select'）。empty（）; $（’＃zone-select’）。append（< option>费用< / option>））; $ .ajax（{类型： GET，网址： https://istack.000webhostapp.com/json/t9.json，dataType： json，成功：function（data）{//console.log（ data）$（'＃zone-select'）。empty（）; $（'＃zone-select'）。append（< option value ='0'>-选择区域-< / 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 （）; //所选选项的名称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（）; //更新图表}）; var zoneNom = []; var zonePop = []; var zoneSalaries = [];对于（数据中的var i）{zoneNom.push（data [i] .zone_nom）; zonePop.push（data [i] .zone_pop）; zoneSalaries.push（data [i] .zone_salaries）} var chartdata = {标签：zoneNom，数据集：[{标签：'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）'，数据：zonePop}，{标签：'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）'，数据：zoneSalaries}]}; var option = {标度：{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'）; //选择第一个选项}，完成：function（）{}}）;} $（document）.ready（function（）{Zone（）;}）;
< script src = https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/ jquery.min.js>< / 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>
Hello :) (I'm novice and I learn on the job),
I work with Chart.js, jQuery, PostgreSQL
Currently I have a bar chart directly linked to PostgreSQL database.
I'd like to add a dropdown to allow the user to select a "zone", which would dynamically update the chart.
Each "zone" has different variables: population, salaries (number of employees in english), etc.
Here is the 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);
?>
I get the following array
[{"id":"1","zone_nom":"test ","zone_pop":"36105","zone_salaries":"15279"},{...],{...}]
Then I generate a dropdown dynamically populated by my table
But I'm stuck on how to pass the selected values in the chart (and then make sure the chart gets refreshed depending on the choice in the dropdown)
<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>
The value of the choice is returned
$("#zone-select").change(function(){
var value = $("#zone-select option:selected").val(); // Value of selected option
console.log('Value: '+value);
});
I am looking for but I can not find the solution for now (probably not very complicated)
Thank you in advance for your help
解决方案
You could accomplish this using the following on change event handler function for your dropdown menu ...
$("#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
});
and, if you wish to select the first option by default, use ...
$("#zone-select").val(zonePop[0]).trigger('change');
working example
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();
});
<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>
这篇关于Chart.js jQuery下拉选择的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
