As you can see I have a dropdown with different charts. However, I would like to make it dynamic so depending on what I choose I want the line chart to be dynamic. Is there any way I can make it happen in this scenario especially because I have various canvas here. For each value, I have a unique canvas. The problem arises when I need
<body> <select id="chartType"> <option value="line2">Population</option> <option value="bar2">Precipitation</option> <option value="pie2">Ethnicity</option> <option value="radar2">Activity</option> </select> <canvas id="line2Chart" width="1234" height="616" class="chartjs-render-monitor" style="display: block; height: 308px; width: 617px;"></canvas> <canvas id="bar2Chart" width="1234" height="616" class="chartjs-render-monitor" style="display: block; height: 308px; width: 617px;"></canvas> <canvas id="pie2Chart" width="1234" height="616" class="chartjs-render-monitor" style="display: block; height: 308px; width: 617px;"></canvas> <canvas id="radar2Chart" width="1234" height="616" class="chartjs-render-monitor" style="display: block; height: 308px; width: 617px;"></canvas> <script> 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("line2Chart"); 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("bar2Chart"); 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("pie2Chart"); 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("radar2Chart"); 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> </body> 
没有评论:
发表评论