<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<link rel="stylesheet" href="widget.css" type="text/css">
<script type="text/javascript">
google.load("visualization", "1", {packages:["gauge"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Temperatuur', 25],
]);
var data2 = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Vochtigheid %', 40],
]);
var data3 = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Windkracht', 3],
]);
var options =
{
width: 800, height: 240,
greenFrom: 10, greenTo: 28,
minorTicks: 5,
min: -30,
max: 50,
};
var options2 =
{
width: 800, height: 240,
greenFrom: 30, greenTo: 70,
minorTicks: 10,
min: 0,
max: 100,
};
var options3 =
{
width: 800, height: 240,
greenFrom:1, greenTo: 7,
minorTicks: 5,
min: 0,
max: 10,
};
var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
var chart2 = new google.visualization.Gauge(document.getElementById('chart_div2'));
var chart3 = new google.visualization.Gauge(document.getElementById('chart_div3'));
chart.draw(data, options);
chart2.draw(data2, options2);
chart3.draw(data3, options3);
}
google.load("visualization", "1", {packages:["corechart"]}); // Visualisatie API laden
$(function()
{
$.getJSON('regenval.json', function(data) //het juiste JSON bestand inladen
{
var table = new google.visualization.DataTable(); //The following example creates a new, empty DataTable - zodat je deze kan vullen
table.addColumn('string', 'Millimeter');
var nummer = data[0].regenval.length;
for(var nummer=0; nummer<data.length; nummer++)
{
table.addColumn('number', data[nummer].afdeling); //voegt een nummer toe aan de chart
}
table.addRows(data[0].regenval.length); //Aantal rijen toevoegen op basis van de JSON inhoud. Pakt hier van het eerste object (het eerste stukje), het aantal jaartallen. Zoveel rijen worden aangemaakt (maar nog niet gevuld)
for(var getal=0; getal<data[0].regenval.length; getal++)
{
table.setCell(getal, 0, data[0].regenval[getal].maand + "");
}
$.each(data,function(index, item){
for(var col=0; col<item.regenval.length;col++) //voor ieder column item doet col=col+1 zolang col kleiner is dan length van regenval
{
table.setCell(col, index + 1, item.regenval[col].aantalmm);
}
});
var optionsregenval =
{
title: 'Gemiddelde regenval: Boedapest, Hongarije', //titel bovenaan de chart
curveType: 'function',
backgroundColor:'white',
animation:
{
duration: 1000,
easing: 'out'
},
hAxis:
{
title: '<- maanden ->',
titleTextStyle: {color: 'blue'},
},
vAxis: //voegt waarden toe aan verticale as
{
title: '<- regenval in millimeter ->', titleTextStyle: {color: 'blue'}, maxValue: '10', minValue: '0',
ticks: [0,1,2,3,4,5,6,7,8]
},
//animation:{
//duration: 1000,
//easing: 'out'
//},
};
var chartregenval = new google.visualization.LineChart(document.getElementById('dediv')); //geeft de var chart een aantal handvaten zodat je deze op line 52 uit kan voeren.
chartregenval.draw(table, optionsregenval); //functie van google om de chart te tekenen met de tbale en options eigenschappen
});
});
</script>
</head>
<body>
<div id="grotechartdiv" >
<div id="chart_div" style="width: 250px; height: 240px;"></div>
<div id="chart_div2" style="width: 250px; height: 240px;"></div>
<div id="chart_div3" style="width: 250px; height: 240px;"></div>
</div>
</body>
</html>
body
{
background-color: yellow;
width: 1000px;
height: 800px;
/*overflow-x: hidden;*/
}
#grotechartdiv
{
border: solid 1px #ff0000;
text-align: center;
width: 100vw;
background-color: azure;
}
[
{
"afdeling": "2013",
"regenval": [
{
"maand": "jan",
"aantalmm": 3
},
{
"maand": "feb",
"aantalmm": 4
},
{
"maand": "mrt",
"aantalmm": 5
},
{
"maand": "apr",
"aantalmm": 5
},
{
"maand": "mei",
"aantalmm": 5
},
{
"maand": "jun",
"aantalmm": 4
},
{
"maand": "jul",
"aantalmm": 5
},
{
"maand": "aug",
"aantalmm": 3
},
{
"maand": "sept",
"aantalmm": 3
},
{
"maand": "okt",
"aantalmm": 3
},
{
"maand": "nov",
"aantalmm": 3
},
{
"maand": "dec",
"aantalmm": 2
}
]
},
{
"afdeling": "2014",
"regenval": [
{
"maand": "jan",
"aantalmm": 4
},
{
"maand": "feb",
"aantalmm": 3
},
{
"maand": "mrt",
"aantalmm": 4
},
{
"maand": "apr",
"aantalmm": 4
},
{
"maand": "mei",
"aantalmm": 2
},
{
"maand": "juni",
"aantalmm": 2
},
{
"maand": "juli",
"aantalmm": 4
},
{
"maand": "aug",
"aantalmm": 1
},
{
"maand": "sep",
"aantalmm": 3
},
{
"maand": "okt",
"aantalmm": 5
},
{
"maand": "nov",
"aantalmm": 6
},
{
"maand": "dec",
"aantalmm": 4
}
]
},
{
"afdeling": "2015 (huidig jaar)",
"regenval": [
{
"maand": "jan",
"aantalmm": 3.19
},
{
"maand": "feb",
"aantalmm": 4.26
},
{
"maand": "mrt",
"aantalmm": 5.42
},
{
"maand": "apr",
"aantalmm": 4.38
},
{
"maand": "mei",
"aantalmm": 3.28
},
{
"maand": "juni",
"aantalmm": 2.36
}
]
}
]
#grotechartdiv > div
{
display: inline-block;
border: solid 1px #000;
}
#dediv
{
border: solid 1px #ff0000;
background-color: crimson;
position: absolute;
top: 400px;
}
我有一个带 JSON 的动态 Google lineChart 和 3 个静态 Google gaugeCharts...我想将它们全部放在一个 html 页面上。在问这个问题之前，我确实在寻找答案；例如，我认为我没有任何同名变量。所有这些图表都有效。 lineChart 可以完全工作(在一个单独的 html 文件中)，3 个 gaugeCharts 也可以工作(也可以单独在一个 html 文档中)。老实说，我很迷茫，似乎无法让我的工作图表和谐地显示在一起。你能帮忙解决这个问题吗？如您所见，我添加了所有 css html javascript jquery 和 JSON 代码。但问题只是在某处的 html 文件中。
最佳答案
我不认为你可以在同一个函数中调用它们。要么为每个图表创建不同的函数，要么构建所有图表的函数堆栈。 For Reference
关于javascript - 1 个 html 页面上的 2 个不同的谷歌图表(1 个带有 JSON 和 3x 仪表硬编码的折线图)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30925038/