var ctx = document.getElementById("lineChart");
var lineChart = new Chart(ctx, {
type:'line',
data: {
labels: ["2000", "2005", "2010", "2015", "2018"],
datasets: [{
label: 'Vancouver Population Data',
data: [195000,2093000,2278000,2485000,2597000],
borderColor: [
'rgba(255,99,132,1)'
],
backgroundColor:['rgba(255,200,200,0.3)'],
borderWidth: 1,
//borderDash:([3]),
pointBackgroundColor:"red",
pointBorderColor: "rgba(250,10,10,0.1)",
pointBorderWidth:"10",
pointStyle:"rectRounded",
pointHoverBackgroundColor:"rgba(255,0,0,0.5)",
pointHoverBorderColor: "rgba(255,255,100,0.7)",
pointHoverRadius:"10",
//showLine:false,
//steppedLine:"false"
}]
},
options: {
title:{
display:true,
text:"Vancouver Population",
fontSize:20,
fontColor:"rgba(20,20,20,1)"
},
legend:{
display:false,
position:'right',
labels:{
fontColor:'#000'
},
},
elements:{
line:{
tension:0, //disables bezier curves
}
},
scales: {
yAxes:[{
ticks: {
beginAtZero:true,
callback: function(value,index,values){
return value + " people"
}
}
}]
},
/*animation: {
duration:0, // general animation time
},*/
hover:{
animationDuration:0, // duration of animations when hovering an item
},
responsiveAnimationDuration:0, // animation duration after a resize
}
});
// Precipitation
var ctx = document.getElementById("barChart");
var BarChart = new Chart(ctx, {
type:'bar',
data: {
labels:["May 2017", "June 2017", "July 2017", "Aug 2017","Sep 2017","Oct 2017","Nov 2017","Dec 2017","Jan 2018","Feb 2018","Mar 2018","Apr 2018","May 2018"],
datasets:[{
label:"Precipitation Data",
data:[102.2,46.4,1.8,5.0,29.4,114.8,197.0,170.6,249.4,105.8,111.8,134.8,1.4],
backgroundColor: [
'rgba(255,99,132,0.5)',
'rgba(155,130,32,0.5)',
'rgba(105,9,132,0.5)',
'rgba(15,130,202,0.5)',
'rgba(15,250,252,0.5)',
'rgba(205,100,32,0.5)',
'rgba(0,205,0,0.5)',
'rgba(55,15,52,0.5)',
'rgba(255,0,0,0.5)',
'rgba(25,59,52,0.5)',
'rgba(0,100,55,0.5)',
'rgba(200,111,199,0.5)',
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(155,130,32,1)',
'rgba(105,9,132,1)',
'rgba(15,130,202,1)',
'rgba(15,250,252,1)',
'rgba(205,100,32,0.5)',
'rgba(0,205,0,1)',
'rgba(55,15,52,1)',
'rgba(255,0,0,1)',
'rgba(25,59,52,1)',
'rgba(0,100,55,1)',
'rgba(200,111,199,1)',
],
borderWidth:"1",
pointHoverBackgroundColor:"#fff",
hoverBorderColor:"#fff",
}]
},
options: {
title:{
display:true,
text:"Vancouver Precipitation",
fontSize:20,
fontColor:"rgba(10,0,20,0.9)"
},
legend:{
display:false,
position:'right',
labels:{
fontColor:'#000'
}
},
scales:{
yAxes:[{
ticks:{
beginAtZero:true,
callback: function(value,index,values){
return value + " mm"
}
}
}]
}
},
});
// Ethnicity
var ctx = document.getElementById("pieChart");
var PieChart = new Chart(ctx,{
type:'pie',
data:{
labels:['European Candadian','Chinese','South Asia','Fillipino','Southeast Asian','Japanese','Latin American','Mixed visible minority','Korean','Aboriginal','West Asian','Black','Arab'],
datasets:[{
label:"Ethnicity",
data:[46.2,27.7,6,6,3,1.7,1.6,1.5,1.5,2,1.2,1,0.5],
backgroundColor: [
'rgba(255,99,132,0.5)',
'rgba(155,130,32,0.5)',
'rgba(105,9,132,0.5)',
'rgba(15,130,202,0.5)',
'rgba(15,250,252,0.5)',
'rgba(205,100,32,0.5)',
'rgba(0,205,0,0.5)',
'rgba(55,15,52,0.5)',
'rgba(255,0,0,0.5)',
'rgba(25,59,52,0.5)',
'rgba(0,100,55,0.5)',
'rgba(200,231,50,0.5)',
'rgba(155,22,30,0.5)',
],
borderColor:[
'rgba(255,99,132,0.5)',
'rgba(155,130,32,0.5)',
'rgba(105,9,132,0.5)',
'rgba(15,130,202,0.5)',
'rgba(15,250,252,0.5)',
'rgba(205,100,32,0.5)',
'rgba(0,205,0,0.5)',
'rgba(55,15,52,0.5)',
'rgba(255,0,0,0.5)',
'rgba(25,59,52,0.5)',
'rgba(0,100,55,0.5)',
'rgba(200,231,50,0.5)',
'rgba(155,22,30,0.5)',
],
borderWidth:[1]
}],
cutoutPercentage:[0]
},
options:{
title:{
display:true,
text:"Vancouver Ethnicity",
fontSize:"20",
fontColor:"rgba(20,20,20,1)"
},
}
});
// Radar
Chart.defaults.scale.ticks.beginAtZero = true;
var ctx = document.getElementById("radarChart");
var RadarChart = new Chart(ctx, {
type:'radar',
data:{
labels:['Hiking','Sporting Events','Stanley Park','Skiing & Snowboarding','Beaches','eating'],
datasets:[{
label:"Male",
data:['50','70','80','60','20','70'],
backgroundColor:[
'rgba(255,155,32,0.5)',
],
borderWidth:1,
pointBackgroundColor:["yellow","black","green","white","skyblue","red"],
pointHoverBackgroundColor:["black"],
pointStyle:["triangle"]
},
{
label:"Female",
data:['60','30','80','20','50','60'],
backgroundColor:[
'rgba(155,15,132,0.5)',
],
borderWidth:1,
pointBackgroundColor:["yellow","black","green","white","skyblue","red"],
pointHoverBackgroundColor:["black"],
pointStyle:["triangle"]
}
]
},
option:{
title:{
display:true,
text:"Activities in Vancouver",
fontSize:"20",
fontColor:"rgba(10,0,20,0.9)"
},
legend:{
display:false,
position:'right',
labels:{
fontColor:'#000',
}
},
scales:{
scale: {
}
}
}
});<script src=".js/2.7.2/Chart.bundle.min.js"></script>
<select id="chartType">
<option value="line">Population</option>
<option value="bar">Precipitation</option>
<option value="pie">Ethnicity</option>
<option value="radar">Activity</option>
</select>
<div class="chart_container">
<canvas id="lineChart"></canvas>
<canvas id="barChart"></canvas>
<canvas id="pieChart"></canvas>
<canvas id="radarChart"></canvas>
</div>
var ctx = document.getElementById("lineChart");
var lineChart = new Chart(ctx, {
type:'line',
data: {
labels: ["2000", "2005", "2010", "2015", "2018"],
datasets: [{
label: 'Vancouver Population Data',
data: [195000,2093000,2278000,2485000,2597000],
borderColor: [
'rgba(255,99,132,1)'
],
backgroundColor:['rgba(255,200,200,0.3)'],
borderWidth: 1,
//borderDash:([3]),
pointBackgroundColor:"red",
pointBorderColor: "rgba(250,10,10,0.1)",
pointBorderWidth:"10",
pointStyle:"rectRounded",
pointHoverBackgroundColor:"rgba(255,0,0,0.5)",
pointHoverBorderColor: "rgba(255,255,100,0.7)",
pointHoverRadius:"10",
//showLine:false,
//steppedLine:"false"
}]
},
options: {
title:{
display:true,
text:"Vancouver Population",
fontSize:20,
fontColor:"rgba(20,20,20,1)"
},
legend:{
display:false,
position:'right',
labels:{
fontColor:'#000'
},
},
elements:{
line:{
tension:0, //disables bezier curves
}
},
scales: {
yAxes:[{
ticks: {
beginAtZero:true,
callback: function(value,index,values){
return value + " people"
}
}
}]
},
/*animation: {
duration:0, // general animation time
},*/
hover:{
animationDuration:0, // duration of animations when hovering an item
},
responsiveAnimationDuration:0, // animation duration after a resize
}
});
// Precipitation
var ctx = document.getElementById("barChart");
var BarChart = new Chart(ctx, {
type:'bar',
data: {
labels:["May 2017", "June 2017", "July 2017", "Aug 2017","Sep 2017","Oct 2017","Nov 2017","Dec 2017","Jan 2018","Feb 2018","Mar 2018","Apr 2018","May 2018"],
datasets:[{
label:"Precipitation Data",
data:[102.2,46.4,1.8,5.0,29.4,114.8,197.0,170.6,249.4,105.8,111.8,134.8,1.4],
backgroundColor: [
'rgba(255,99,132,0.5)',
'rgba(155,130,32,0.5)',
'rgba(105,9,132,0.5)',
'rgba(15,130,202,0.5)',
'rgba(15,250,252,0.5)',
'rgba(205,100,32,0.5)',
'rgba(0,205,0,0.5)',
'rgba(55,15,52,0.5)',
'rgba(255,0,0,0.5)',
'rgba(25,59,52,0.5)',
'rgba(0,100,55,0.5)',
'rgba(200,111,199,0.5)',
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(155,130,32,1)',
'rgba(105,9,132,1)',
'rgba(15,130,202,1)',
'rgba(15,250,252,1)',
'rgba(205,100,32,0.5)',
'rgba(0,205,0,1)',
'rgba(55,15,52,1)',
'rgba(255,0,0,1)',
'rgba(25,59,52,1)',
'rgba(0,100,55,1)',
'rgba(200,111,199,1)',
],
borderWidth:"1",
pointHoverBackgroundColor:"#fff",
hoverBorderColor:"#fff",
}]
},
options: {
title:{
display:true,
text:"Vancouver Precipitation",
fontSize:20,
fontColor:"rgba(10,0,20,0.9)"
},
legend:{
display:false,
position:'right',
labels:{
fontColor:'#000'
}
},
scales:{
yAxes:[{
ticks:{
beginAtZero:true,
callback: function(value,index,values){
return value + " mm"
}
}
}]
}
},
});
// Ethnicity
var ctx = document.getElementById("pieChart");
var PieChart = new Chart(ctx,{
type:'pie',
data:{
labels:['European Candadian','Chinese','South Asia','Fillipino','Southeast Asian','Japanese','Latin American','Mixed visible minority','Korean','Aboriginal','West Asian','Black','Arab'],
datasets:[{
label:"Ethnicity",
data:[46.2,27.7,6,6,3,1.7,1.6,1.5,1.5,2,1.2,1,0.5],
backgroundColor: [
'rgba(255,99,132,0.5)',
'rgba(155,130,32,0.5)',
'rgba(105,9,132,0.5)',
'rgba(15,130,202,0.5)',
'rgba(15,250,252,0.5)',
'rgba(205,100,32,0.5)',
'rgba(0,205,0,0.5)',
'rgba(55,15,52,0.5)',
'rgba(255,0,0,0.5)',
'rgba(25,59,52,0.5)',
'rgba(0,100,55,0.5)',
'rgba(200,231,50,0.5)',
'rgba(155,22,30,0.5)',
],
borderColor:[
'rgba(255,99,132,0.5)',
'rgba(155,130,32,0.5)',
'rgba(105,9,132,0.5)',
'rgba(15,130,202,0.5)',
'rgba(15,250,252,0.5)',
'rgba(205,100,32,0.5)',
'rgba(0,205,0,0.5)',
'rgba(55,15,52,0.5)',
'rgba(255,0,0,0.5)',
'rgba(25,59,52,0.5)',
'rgba(0,100,55,0.5)',
'rgba(200,231,50,0.5)',
'rgba(155,22,30,0.5)',
],
borderWidth:[1]
}],
cutoutPercentage:[0]
},
options:{
title:{
display:true,
text:"Vancouver Ethnicity",
fontSize:"20",
fontColor:"rgba(20,20,20,1)"
},
}
});
// Radar
Chart.defaults.scale.ticks.beginAtZero = true;
var ctx = document.getElementById("radarChart");
var RadarChart = new Chart(ctx, {
type:'radar',
data:{
labels:['Hiking','Sporting Events','Stanley Park','Skiing & Snowboarding','Beaches','eating'],
datasets:[{
label:"Male",
data:['50','70','80','60','20','70'],
backgroundColor:[
'rgba(255,155,32,0.5)',
],
borderWidth:1,
pointBackgroundColor:["yellow","black","green","white","skyblue","red"],
pointHoverBackgroundColor:["black"],
pointStyle:["triangle"]
},
{
label:"Female",
data:['60','30','80','20','50','60'],
backgroundColor:[
'rgba(155,15,132,0.5)',
],
borderWidth:1,
pointBackgroundColor:["yellow","black","green","white","skyblue","red"],
pointHoverBackgroundColor:["black"],
pointStyle:["triangle"]
}
]
},
option:{
title:{
display:true,
text:"Activities in Vancouver",
fontSize:"20",
fontColor:"rgba(10,0,20,0.9)"
},
legend:{
display:false,
position:'right',
labels:{
fontColor:'#000',
}
},
scales:{
scale: {
}
}
}
});<script src="https://cdnjs.cloudflare./ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<select id="chartType">
<option value="line">Population</option>
<option value="bar">Precipitation</option>
<option value="pie">Ethnicity</option>
<option value="radar">Activity</option>
</select>
<div class="chart_container">
<canvas id="lineChart"></canvas>
<canvas id="barChart"></canvas>
<canvas id="pieChart"></canvas>
<canvas id="radarChart"></canvas>
</div>Hi, I am trying to create a drop-down option for the following chart.js charts. For example, when I click the pie, I would like to hide the rest of them and only show the pie. I have looked at examples posted here, but they all use a single canvas with the same data (values). I would like to use 4 different types of canvas that contain different datas. I am confused where I should start with. Thank you for reading.
Share Improve this question edited Aug 31, 2022 at 17:40 aynber 23k9 gold badges54 silver badges68 bronze badges asked May 19, 2018 at 21:52 Jun JungJun Jung 4058 silver badges20 bronze badges 4-
Put a click handler on each canvas element. On click, hide every canvas via css (
display: none) then show ( 'display:inherit` ) the one that was clicked. – Randy Casburn Commented May 19, 2018 at 21:56 - Sorry can you elaborate that? I do not want the click handler on the element as I want to control with select options. How do I connect them? – Jun Jung Commented May 19, 2018 at 22:02
-
Sorry, put a change event handler on the
<select>element. Hide every canvas via css ( display: none ) then show ( 'display:inherit` ) the one that was selected. – Randy Casburn Commented May 19, 2018 at 22:39 - Thank you, that is more clear. However, I am stuck on when the one is selected part... – Jun Jung Commented May 19, 2018 at 23:06
1 Answer
Reset to default 5The <select> element has an array of options and an attribute named selectedIndex. So to get the selected option:
let select = document.querySelector('#chartType');
// concat Chart for the canvas ID
let chart = select.options[select.selectedIndex].value + 'Chart';
EDIT ------------------------------------------------------- correction ---^, add .value here
Then grab all the canvases and hide all but the one selected:
document.querySelectorAll('canvas')
.forEach(c => {c.style.display = (c.id === chart)? 'inherit' : 'none';})
let select = document.querySelector('#chartType');
select.addEventListener('change', showHide);
function showHide() {
// concat Chart for the canvas ID
let chart = this.options[select.selectedIndex].value + 'Chart';
document.querySelectorAll('canvas')
.forEach(c => {
c.style.display = (c.id === chart) ? 'inherit' : 'none';
})
}
var ctx = document.getElementById("lineChart");
var lineChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["2000", "2005", "2010", "2015", "2018"],
datasets: [{
label: 'Vancouver Population Data',
data: [195000, 2093000, 2278000, 2485000, 2597000],
borderColor: [
'rgba(255,99,132,1)'
],
backgroundColor: ['rgba(255,200,200,0.3)'],
borderWidth: 1,
//borderDash:([3]),
pointBackgroundColor: "red",
pointBorderColor: "rgba(250,10,10,0.1)",
pointBorderWidth: "10",
pointStyle: "rectRounded",
pointHoverBackgroundColor: "rgba(255,0,0,0.5)",
pointHoverBorderColor: "rgba(255,255,100,0.7)",
pointHoverRadius: "10",
//showLine:false,
//steppedLine:"false"
}]
},
options: {
title: {
display: true,
text: "Vancouver Population",
fontSize: 20,
fontColor: "rgba(20,20,20,1)"
},
legend: {
display: false,
position: 'right',
labels: {
fontColor: '#000'
},
},
elements: {
line: {
tension: 0, //disables bezier curves
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
callback: function(value, index, values) {
return value + " people"
}
}
}]
},
/*animation: {
duration:0, // general animation time
},*/
hover: {
animationDuration: 0, // duration of animations when hovering an item
},
responsiveAnimationDuration: 0, // animation duration after a resize
}
});
// Precipitation
var ctx = document.getElementById("barChart");
var BarChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["May 2017", "June 2017", "July 2017", "Aug 2017", "Sep 2017", "Oct 2017", "Nov 2017", "Dec 2017", "Jan 2018", "Feb 2018", "Mar 2018", "Apr 2018", "May 2018"],
datasets: [{
label: "Precipitation Data",
data: [102.2, 46.4, 1.8, 5.0, 29.4, 114.8, 197.0, 170.6, 249.4, 105.8, 111.8, 134.8, 1.4],
backgroundColor: [
'rgba(255,99,132,0.5)',
'rgba(155,130,32,0.5)',
'rgba(105,9,132,0.5)',
'rgba(15,130,202,0.5)',
'rgba(15,250,252,0.5)',
'rgba(205,100,32,0.5)',
'rgba(0,205,0,0.5)',
'rgba(55,15,52,0.5)',
'rgba(255,0,0,0.5)',
'rgba(25,59,52,0.5)',
'rgba(0,100,55,0.5)',
'rgba(200,111,199,0.5)',
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(155,130,32,1)',
'rgba(105,9,132,1)',
'rgba(15,130,202,1)',
'rgba(15,250,252,1)',
'rgba(205,100,32,0.5)',
'rgba(0,205,0,1)',
'rgba(55,15,52,1)',
'rgba(255,0,0,1)',
'rgba(25,59,52,1)',
'rgba(0,100,55,1)',
'rgba(200,111,199,1)',
],
borderWidth: "1",
pointHoverBackgroundColor: "#fff",
hoverBorderColor: "#fff",
}]
},
options: {
title: {
display: true,
text: "Vancouver Precipitation",
fontSize: 20,
fontColor: "rgba(10,0,20,0.9)"
},
legend: {
display: false,
position: 'right',
labels: {
fontColor: '#000'
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
callback: function(value, index, values) {
return value + " mm"
}
}
}]
}
},
});
// Ethnicity
var ctx = document.getElementById("pieChart");
var PieChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ['European Candadian', 'Chinese', 'South Asia', 'Fillipino', 'Southeast Asian', 'Japanese', 'Latin American', 'Mixed visible minority', 'Korean', 'Aboriginal', 'West Asian', 'Black', 'Arab'],
datasets: [{
label: "Ethnicity",
data: [46.2, 27.7, 6, 6, 3, 1.7, 1.6, 1.5, 1.5, 2, 1.2, 1, 0.5],
backgroundColor: [
'rgba(255,99,132,0.5)',
'rgba(155,130,32,0.5)',
'rgba(105,9,132,0.5)',
'rgba(15,130,202,0.5)',
'rgba(15,250,252,0.5)',
'rgba(205,100,32,0.5)',
'rgba(0,205,0,0.5)',
'rgba(55,15,52,0.5)',
'rgba(255,0,0,0.5)',
'rgba(25,59,52,0.5)',
'rgba(0,100,55,0.5)',
'rgba(200,231,50,0.5)',
'rgba(155,22,30,0.5)',
],
borderColor: [
'rgba(255,99,132,0.5)',
'rgba(155,130,32,0.5)',
'rgba(105,9,132,0.5)',
'rgba(15,130,202,0.5)',
'rgba(15,250,252,0.5)',
'rgba(205,100,32,0.5)',
'rgba(0,205,0,0.5)',
'rgba(55,15,52,0.5)',
'rgba(255,0,0,0.5)',
'rgba(25,59,52,0.5)',
'rgba(0,100,55,0.5)',
'rgba(200,231,50,0.5)',
'rgba(155,22,30,0.5)',
],
borderWidth: [1]
}],
cutoutPercentage: [0]
},
options: {
title: {
display: true,
text: "Vancouver Ethnicity",
fontSize: "20",
fontColor: "rgba(20,20,20,1)"
},
}
});
// Radar
Chart.defaults.scale.ticks.beginAtZero = true;
var ctx = document.getElementById("radarChart");
var RadarChart = new Chart(ctx, {
type: 'radar',
data: {
labels: ['Hiking', 'Sporting Events', 'Stanley Park', 'Skiing & Snowboarding', 'Beaches', 'eating'],
datasets: [{
label: "Male",
data: ['50', '70', '80', '60', '20', '70'],
backgroundColor: [
'rgba(255,155,32,0.5)',
],
borderWidth: 1,
pointBackgroundColor: ["yellow", "black", "green", "white", "skyblue", "red"],
pointHoverBackgroundColor: ["black"],
pointStyle: ["triangle"]
},
{
label: "Female",
data: ['60', '30', '80', '20', '50', '60'],
backgroundColor: [
'rgba(155,15,132,0.5)',
],
borderWidth: 1,
pointBackgroundColor: ["yellow", "black", "green", "white", "skyblue", "red"],
pointHoverBackgroundColor: ["black"],
pointStyle: ["triangle"]
}
]
},
option: {
title: {
display: true,
text: "Activities in Vancouver",
fontSize: "20",
fontColor: "rgba(10,0,20,0.9)"
},
legend: {
display: false,
position: 'right',
labels: {
fontColor: '#000',
}
},
scales: {
scale: {}
}
}
});<script src="https://cdnjs.cloudflare./ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<select id="chartType">
<option value="line">Population</option>
<option value="bar">Precipitation</option>
<option value="pie">Ethnicity</option>
<option value="radar">Activity</option>
</select>
<div class="chart_container">
<canvas id="lineChart"></canvas>
<canvas id="barChart"></canvas>
<canvas id="pieChart"></canvas>
<canvas id="radarChart"></canvas>
</div>发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744829137a4595976.html
评论列表（0条）