我正在使用svelte来制作一些列表的图形表示。问题是我已经尝试了所有的方法,但是它都不起作用(我打开了控制台,它没有显示任何错误,所以我看不到我在哪里失败了)。我已经从Highcharts的主页复制了loadGraph()的代码,其余的代码来自用户社区,它工作得很好...
<script>
import { onMount } from "svelte";
import Highcharts from "highcharts";
import Button from "sveltestrap/src/Button.svelte";
export let params = {};
//const delay = (ms) => new Promise((res) => setTimeout(res, ms));
let apiData = [];
let country = params.country;
let pais = [];
let year = [];
let male = [];
let female = [];
let total = [];
let male2015 = [];
let male2016 = [];
let male2017 = [];
let male2018 = [];
let male2019 = [];
let male2020 = [];
let female2015 = [];
let female2016 = [];
let female2017 = [];
let female2018 = [];
let female2019 = [];
let female2020 = [];
let total2015 = [];
let total2016 = [];
let total2017 = [];
let total2018 = [];
let total2019 = [];
let total2020 = [];
let sumaMale2015 = 0;
let sumaMale2016 = 0;
let sumaMale2017 = 0;
let sumaMale2018 = 0;
let sumaMale2019 = 0;
let sumaMale2020 = 0;
let sumaFemale2015 = 0;
let sumaFemale2016 = 0;
let sumaFemale2017 = 0;
let sumaFemale2018 = 0;
let sumaFemale2019 = 0;
let sumaFemale2020 = 0;
let sumaTotal2015 = 0;
let sumaTotal2016 = 0;
let sumaTotal2017 = 0;
let sumaTotal2018 = 0;
let sumaTotal2019 = 0;
let sumaTotal2020 = 0;
async function getData(){
const res1 = await fetch('/api/v1/proportion-stats');
if (res1.ok){
const arrayData = await res1.json();
apiData = arrayData;
console.log("api data : " + apiData);
//Ordenamos valores:
apiData.sort(function (a, b) {
var keyA = new Date(a.year),
keyB = new Date(b.year);
// Compare the 2 dates
if (keyA < keyB) return -1;
if (keyA > keyB) return 1;
return 0;
});
console.log(apiData.length);
apiData.forEach((v) => {
year.push(v.year);
});
console.log(year);
for(let i = 0; i < year.length; i++){
if(apiData[i].year == 2015){
male2015.push(apiData[i].male);
female2015.push(apiData[i].female);
total2015.push(apiData[i].total);
}
else if(apiData[i].year == 2016){
male2016.push(apiData[i].male);
female2016.push(apiData[i].female);
total2016.push(apiData[i].total);
}
else if(apiData[i].year == 2017){
male2017.push(apiData[i].male);
female2017.push(apiData[i].female);
total2017.push(apiData[i].total);
}else if(apiData[i].year == 2018){
male2018.push(apiData[i].male);
female2018.push(apiData[i].female);
total2018.push(apiData[i].total);
}else if(apiData[i].year == 2019){
male2019.push(apiData[i].male);
female2019.push(apiData[i].female);
total2019.push(apiData[i].total);
}
else if(apiData[i].year == 2020){
male2020.push(apiData[i].male);
female2020.push(apiData[i].female);
total2020.push(apiData[i].total);
}
}
for(let i= 0; i< male2015; i++){
sumaMale2015 = sumaMale2015 + male2015[i];
sumaFemale2015 = sumaFemale2015 + female2015[i];
sumaTotal2015 = sumaTotal2015 + total2015[i];
}
for(let i= 0; i< male2016; i++){
sumaMale2016 = sumaMale2016 + male2016[i];
sumaFemale2016 = sumaFemale2016 + female2016[i];
sumaTotal2016 = sumaTotal2016 + total2016[i];
}
for(let i= 0; i< male2017; i++){
sumaMale2017 = sumaMale2017 + male2017[i];
sumaFemale2017 = sumaFemale2017 + female2017[i];
sumaTotal2017 = sumaTotal2017 + total2017[i];
}
for(let i= 0; i< male2018; i++){
sumaMale2018 = sumaMale2018 + male2018[i];
sumaFemale2018 = sumaFemale2018 + female2018[i];
sumaTotal2018 = sumaTotal2018 + total2018[i];
}
for(let i= 0; i< male2019; i++){
sumaMale2019 = sumaMale2019 + male2019[i];
sumaFemale2019 = sumaFemale2019 + female2019[i];
sumaTotal2019 = sumaTotal2019 + total2019[i];
}
for(let i= 0; i< male2020; i++){
sumaMale2020 = sumaMale2020 + male2020[i];
sumaFemale2020 = sumaFemale2020 + female2020[i];
sumaTotal2020 = sumaTotal2020 + total2020[i];
}
loadGraph();
}else{
window.alert("No hay datos cargados");
console.log("INTERNAL FATAL ERROR");
window.location.href ='/#/proportion-stats';
}
}
async function loadGraph(){
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Proportion of '
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: ['2015', '2016', '2017', '2018', '2019', '2020']
},
yAxis: {
title: {
text: '% of population'
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: [{
name: 'Male',
data: [sumaMale2015, sumaMale2016, sumaMale2017, sumaMale2018, sumaMale2019, sumaMale2020]
}, {
name: 'Female',
data: [sumaFemale2015, sumaFemale2016, sumaFemale2017, sumaFemale2018, sumaFemale2019, sumaFemale2020]
},{
name: 'Total',
data: [sumaTotal2015, sumaTotal2016, sumaTotal2017, sumaTotal2018, sumaTotal2019, sumaTotal2020]
}]
});
}
onMount(getData);
</script>
<svelte:head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"on:load={loadGraph}></script>
<figure class="highcharts-figure">
<div id="container"></div>
<p class="highcharts-description">
This chart shows how data labels can be added to the data series. This
can increase readability and comprehension for small datasets.
</p>
</figure>
</svelte:head>
<main>
<br />
<h1 align="center">Pais al que buscar gráfica:</h1>
<div align="center">
<input type="text" bind:value={country} />
<Button
outline
color="info"
on:click={() => {
window.location.href = `/#/graphProportionSearch/${country}`;
location.reload();
}}
>
Buscar
</Button>
</div>
<br />
<figure class="highcharts-figure">
<div id="container" />
</figure>
<br />
<figure class="highcharts-figure">
<div id="container" />
<p class="highcharts-description">
En esta gráfica se muestra para el pais seleccionado el avance de la
tasa de empleo, educación o capacitación de los jóvenes.
</p>
</figure>
</main>
1条答案
按热度按时间bz4sfanl1#
你有一个
figure
,在你的svelte:head
块中有一个id
为 container,Highcharts试图在那里呈现你的图形(事实上,如果你检查页面的话,它甚至可以做到这一点)。我还看到有几个元素的
id
为 container,id必须是unique才能正常工作。