Так что, в основном, мое веб-приложение, над которым я работаю, - это HTMl / CSS / Javascript, все в файле для простоты прямо сейчас. Он считывает данные из CSV о случаях, смертях, днях, касающихся covid-19, и отображает их на графике. js графики. У меня есть раскрывающийся список состояний, и когда кнопка нажата, отображаются графики статистики для рассматриваемого состояния. Функциональность моего состояния не работает правильно. Он работает под нагрузкой в первый раз, но не работает, когда вы нажимаете кнопку «Показать состояние данных». Когда я нажимаю кнопку, первые общие случаи для состояния не загружаются, а боковая панель, содержащая совокупную статистику, не загружается. У меня был этот функционал ранее, но он сломался. Пожалуйста, посмотрите на мой код. Вот мой github, где вы можете легко загрузить автономный HTML со всеми css и javasript внутри. https://github.com/PjBanj/CoronaVirusStatistics/. Возьмите индекс. html и запустите его в chrome. Ищите предполагаемую функциональность, когда вы выбираете состояние и нажимаете кнопку состояния дисплея. Ошибка, которую я получаю, когда нажимаю кнопку: «ncaught TypeError: Object.defineProperty вызывается для необъекта в моем chart.min. js в Function.defineProperty ()» *
HTML:
<div class="col-xs-12" style="display: flex; flex-direction: row; justify-content: center; align-items: center">
<label for="state">State</label>
<select id="state" name="state"><option value="Alabama">Alabama</option><option value="Alaska">Alaska</option><option value="Arizona">Arizona</option><option value="Arkansas">Arkansas</option><option value="California">California</option><option value="Colorado">Colorado</option><option value="Connecticut">Connecticut</option><option value="Delaware">Delaware</option><option value="District of Columbia">District of Columbia</option><option value="Florida">Florida</option><option value="Georgia">Georgia</option><option value="Guam">Guam</option><option value="Hawaii">Hawaii</option><option value="Idaho">Idaho</option><option value="Illinois">Illinois</option><option value="Indiana">Indiana</option><option value="Iowa">Iowa</option><option value="Kansas">Kansas</option><option value="Kentucky">Kentucky</option><option value="Louisiana">Louisiana</option><option value="Maine">Maine</option><option value="Maryland">Maryland</option><option value="Massachusetts">Massachusetts</option><option value="Michigan">Michigan</option><option value="Minnesota">Minnesota</option><option value="Mississippi">Mississippi</option><option value="Missouri">Missouri</option><option value="Montana">Montana</option><option value="Nebraska">Nebraska</option><option value="Nevada">Nevada</option><option value="New Hampshire">New Hampshire</option><option value="New Jersey">New Jersey</option><option value="New Mexico">New Mexico</option><option value="New York">New York</option><option value="North Carolina">North Carolina</option><option value="North Dakota">North Dakota</option><option value="Northern Marianas Islands">Northern Marianas Islands</option><option value="Ohio">Ohio</option><option value="Oklahoma">Oklahoma</option><option value="Oregon">Oregon</option><option value="Pennsylvania">Pennsylvania</option><option value="Puerto Rico">Puerto Rico</option><option value="Rhode Island">Rhode Island</option><option value="South Carolina">South Carolina</option><option value="South Dakota">South Dakota</option><option value="Tennessee">Tennessee</option><option value="Texas">Texas</option><option value="Utah">Utah</option><option value="Vermont">Vermont</option><option value="Virginia">Virginia</option><option value="Virgin Islands">Virgin Islands</option><option value="Washington">Washington</option><option value="West Virginia">West Virginia</option><option value="Wisconsin">Wisconsin</option><option value="Wyoming">Wyoming</option></select>
<button class="button" align="center" style="margin: 20px; padding: 5px" onclick="chartStateCases(document.getElementById('state').value)">Display State Data</button>
</div>
<div class="col-xs-12" >
<h5 class="text-center">Total Cases and Deaths Per Day in <span class='newState'>Alabama</span></h5>
<div style="height: 300px; width: 45%;display:inline-block;"></>
<canvas id="CoronaChartStateCases"> </canvas>
</div>
<div style="height: 300px; width: 45%;display:inline-block;">
<canvas id="CoronaChartStateDeaths" ></canvas>
</div>
</div>
<div class="col-xs-12" >
<h5 class="text-center">New Cases and Deaths Per Day in <span class='newState'>Alabama</span></h5>
<div style="height: 300px; width: 45%;display:inline-block;"></>
<canvas id="CoronaChartNewStateCases"> </canvas>
</div>
<div style="height: 300px; width: 45%;display:inline-block;">
<canvas id="CoronaChartNewStateDeaths" ></canvas>
</div>
</div>
</main>
Javascript:
<script>
var cases = [];
var deaths = [];
var newCases=[];
var newDeaths=[];
var days = [];
var nationDays=[];
var nationCases=[];
var newNationCases=[];
var nationDeaths=[];
var newNationDeaths=[];
var state = "New York";
var caseUSChart = null;
var newCaseUSChart = null;
var deathUSChart = null;
var newDeathUSChart = null;
var caseStateChart = null;
var deathStateChart = null;
var newCaseStateChart = null;
var newDeathStateChart = null;
window.onload = function () {
displayCountryData();
getDisplayStateData(state);
}
function loadSidePanel(newState){
var casestate = cases[cases.length-1];
var deathstate = deaths[deaths.length-1];
document.getElementsByClassName("newState")[0].innerHTML = newState;
document.getElementsByClassName("newState")[1].innerHTML = newState;
document.getElementsByClassName("newState")[2].innerHTML = newState;
document.getElementsByClassName("newState")[3].innerHTML = newState;
}
function chartStateCases(state) {
getDisplayStateData(state);
}
function chartStateCases(cases, days) {
if(caseStateChart!=null){
caseStateChart.destroy();
}
var ctx = document.getElementById('CoronaChartStateCases').getContext('2d');
caseStateChart = new Chart(ctx, {
type: 'bar',
data: {
labels: days,
datasets: [{
label: 'Cases',
data: cases,
backgroundColor: "rgb(207,181,59)"
}]
},
options: {
title: {
display: true,
text: 'Total CoronaVirus Cases in the State'
},
maintainAspectRatio: false,
responsive: true,
scales: {
xAxes: [ {
ticks: {
autoSkip: true,
maxTicksLimit: 12
},
display: true,
scaleLabel: {
display: true,
labelString: 'Days since first case in the State'
},
} ],
yAxes: [ {
display: true,
scaleLabel: {
display: true,
labelString: 'Total Cases in the state'
}
} ]
}
}
});
caseStateChart.render();
}
function chartStateDeaths(deaths, days) {
if(deathStateChart!=null){
deathStateChart.destroy();
}
var ctx = document.getElementById('CoronaChartStateDeaths').getContext('2d');
deathStateChart = new Chart(ctx, {
type: 'bar',
data: {
labels: days,
datasets: [{
label: 'Deaths',
data: deaths,
backgroundColor: "rgb(0,0,139)"
}]
},
options: {
title: {
display: true,
text: 'Total CoronaVirus Deaths in the State'
},
responsive: true,
maintainAspectRatio: false,
scales: {
xAxes: [ {
ticks: {
autoSkip: true,
maxTicksLimit: 12
},
display: true,
scaleLabel: {
display: true,
labelString: 'Days since first case in the State'
},
} ],
yAxes: [ {
display: true,
scaleLabel: {
display: true,
labelString: 'Total Deaths in the state'
}
} ]
}
}
});
deathStateChart.render();
}
function chartNewStateCases(nCases, dayaxis) {
if(newCaseStateChart!=null){
newCaseStateChart.destroy();
}
var ctx = document.getElementById('CoronaChartNewStateCases').getContext('2d');
newCaseStateChart = new Chart(ctx, {
type: 'bar',
data: {
labels: dayaxis,
datasets: [{
label: 'New Cases per Day',
data: nCases,
backgroundColor: "rgb(207,181,59)"
}]
},
options: {
title: {
display: true,
text: 'New CoronaVirus cases per Day in the State'
},
maintainAspectRatio: false,
responsive: true,
scales: {
xAxes: [ {
ticks: {
autoSkip: true,
maxTicksLimit: 12
},
display: true,
scaleLabel: {
display: true,
labelString: 'Days since first case in the State'
},
} ],
yAxes: [ {
display: true,
scaleLabel: {
display: true,
labelString: 'New Cases per Day'
}
} ]
}
}
});
newCaseStateChart.render();
}
function chartNewStateDeaths(nDeaths, dayaxis) {
if(newDeathStateChart!=null){
newDeathStateChart.destroy();
}
var ctx = document.getElementById('CoronaChartNewStateDeaths').getContext('2d');
newDeathStateChart = new Chart(ctx, {
type: 'bar',
data: {
labels: dayaxis,
datasets: [{
label: 'New Deaths per day',
data: nDeaths,
backgroundColor: "rgb(0,0,139)"
}]
},
options: {
title: {
display: true,
text: 'New CoronaVirus Deaths in the State'
},
maintainAspectRatio: false,
responsive: true,
scales: {
xAxes: [ {
ticks: {
autoSkip: true,
maxTicksLimit: 12
},
display: true,
scaleLabel: {
display: true,
labelString: 'Days since first case in the State'
},
} ],
yAxes: [ {
display: true,
scaleLabel: {
display: true,
labelString: 'New Deaths per Day'
}
} ]
}
}
});
newDeathStateChart.render();
}
function getDisplayStateData(state) {
cases = [];
deaths = [];
newStateCases=[];
newStateDeaths=[];
days = [];
fetch('https://raw.githubusercontent.com/nytimes/covid-19-data/master/us-states.csv')
.then((response) => {
return response.text();
})
.then((data) => {
const table = data.split('\n').slice(1);
curDay = 0;
table.forEach((row) => {
const columns = row.split(',');
if(columns[1]==state) {
cases.push(columns[3]);
deaths.push(columns[4]);
days.push(curDay++);
}
});
chartStateCases(cases, days);
chartStateDeaths(deaths, days);
loadSidePanel(state);
populateNewStateStats(cases, deaths);
chartNewStateCases(newStateCases, days);
chartNewStateDeaths(newStateDeaths, days);
})
}
function csvToArray(csvString) {
// The array we're going to build
var csvArray = [];
// Break it into rows to start
var csvRows = csvString.split(/\n/);
// Take off the first line to get the headers, then split that into an array
var csvHeaders = csvRows.shift().split(',');
// Loop through remaining rows
for (var rowIndex = 0; rowIndex < csvRows.length; ++rowIndex) {
var rowArray = csvRows[rowIndex].split(',');
// Create a new row object to store our data.
var rowObject = csvArray[rowIndex] = {};
// Then iterate through the remaining properties and use the headers as keys
for (var propIndex = 0; propIndex < rowArray.length; ++propIndex) {
// Grab the value from the row array we're looping through...
var propValue = rowArray[propIndex];
// ...also grab the relevant header (the RegExp in both of these removes quotes)
var propLabel = csvHeaders[propIndex];
rowObject[propLabel] = propValue;
}
}
return csvArray;
}
function displayCountryData() {
fetch('https://raw.githubusercontent.com/nytimes/covid-19-data/master/us-states.csv')
.then((response) => {
return response.text();
})
.then((data) => {
var csvData = csvToArray(data);
const res = Object.values(csvData).reduce((acc, {date, cases, deaths}) => {
if (acc[date] !== undefined) {
acc[date].totalCases += (+cases);
acc[date].totalDeaths += (+deaths);
}
else{
acc[date] = {date, totalCases: (+cases), totalDeaths: (+deaths)};
}
return acc;
}, {});
var i = 0;
for (var key in res)
{
nationDays.push(i);
nationCases.push(res[key].totalCases);
nationDeaths.push(res[key].totalDeaths);
i++;
}
chartCountryCases();
chartCountryDeaths();
populateNewNationStats();
chartNewCountryCases();
chartNewCountryDeaths();
var caseus = nationCases[nationCases.length-1];
var deathus = nationDeaths[nationDeaths.length-1];
document.getElementById('caseus').innerHTML = caseus;
document.getElementById('deathus').innerHTML = deathus;
})
}
function populateNewNationStats()
{
var idx = 0;
for(var x in nationCases)
{
if(idx==0)
{
newNationCases.push(0);
newNationDeaths.push(0);
}
else
{
newNationCases.push(nationCases[idx] - nationCases[idx-1]);
newNationDeaths.push(nationDeaths[idx] - nationDeaths[idx-1]);
}
idx++;
}
console.log(newNationCases);
console.log(newNationDeaths);
}
function populateNewStateStats(stateCases, stateDeaths)
{
var idx = 0;
for(var x in stateCases)
{
if(idx==0)
{
newStateCases.push(0);
newStateDeaths.push(0);
}
else
{
newStateCases.push(stateCases[idx] - stateCases[idx-1]);
newStateDeaths.push(stateDeaths[idx] - stateDeaths[idx-1]);
}
idx++;
}
}
</script>