在JSON文件中编写什么以创建多个折线图HTML [英] What to write in JSON file to create multiple line chart HTML
问题描述
我是javascript新手，请原谅我.我正在尝试制作一个折线图(包含4条线)，该线图每小时更新一次.该信息将在JSON文件中找到，但是我不确定如何编写.以前，我曾尝试使用 data.addColumn()和 data.addRows()，但是我找不到与JSON文件连接的方法.假设您要举一个例子，请显示四种不同商品的销售数量
I'm new to javascript so please forgive me. I am trying to make a line chart (with 4 lines) which get updated every hour. The information will be found in a JSON file however I am unsure how to write it. Previously I have tried to use data.addColumn() and data.addRows() but I couldn't find a way to connec that with a JSON file. Say if you were to make an example, please show the number of sales of four different items
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var options = {
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Sales'
},
title: 'Today',
height: 600
};
var chart = new google.visualization.LineChart(document.getElementById('dagens'));
var jsonData = $.ajax({
url: 'getData.php',
dataType: 'json',
})
drawChart(jsonData);
}).done(drawChart);
function drawChart(jsonData) {
var data = new google.visualization.DataTable(jsonData);
chart.draw(data, options);
}
</script>
在getData.php文件中这样写:
In the getData.php file this is written:
$string = file_get_contents("sampleData.json");
echo $string;
如果可能的话，我希望使用Google的图表系统.预先非常感谢.
I wish to use google's chart system if possible. Many thanks in advance.
JSON文件:
{
cols: [{label: 'Time', type: 'number'},
{label: 'Sales 1', type: 'number'},
{label: 'Sales 2', type: 'number'},
{label: 'Sales 3', type: 'number'},
{label: 'Sales 4', type: 'number'}
],
rows: [
{c:[{v: 0}, {v: 1000}, {v: 1000}, {v: 1000}, {v: 1000}]},
{c:[{v: 1}, {v: 1000}, {v: 1000}, {v: 1000}, {v: 1000}]},
{c:[{v: 2}, {v: 1000}, {v: 1000}, {v: 1000}, {v: 1000}]},
{c:[{v: 3}, {v: 1000}, {v: 1000}, {v: 1000}, {v: 1000}]},
{c:[{v: 4}, {v: 1000}, {v: 1000}, {v: 1000}, {v: 1000}]},
{c:[{v: 5}, {v: 1000}, {v: 1000}, {v: 1000}, {v: 1000}]},
{c:[{v: 6}, {v: 1000}, {v: 1000}, {v: 1000}, {v: 1000}]},
{c:[{v: 7}, {v: 1000}, {v: 1000}, {v: 1000}, {v: 1000}]},
{c:[{v: 8}, {v: 1000}, {v: 1000}, {v: 1000}, {v: 1000}]},
{c:[{v: 9}, {v: 1000}, {v: 1000}, {v: 1000}, {v: 1000}]},
{c:[{v: 10}, {v: 1000}, {v: 1000}, {v: 1000}, {v: 1000}]},
{c:[{v: 11}, {v: 1000}, {v: 1000}, {v: 1000}, {v: 1000}]},
{c:[{v: 12}, {v: 1000}, {v: 1000}, {v: 1000}, {v: 1000}]},
{c:[{v: 13}, {v: 1000}, {v: 1000}, {v: 1000}, {v: 1000}]},
{c:[{v: 14}, {v: 1000}, {v: 1000}, {v: 1000}, {v: 1000}]},
{c:[{v: 15}, {v: 1000}, {v: 1000}, {v: 1000}, {v: 1000}]},
{c:[{v: 16}, {v: 1000}, {v: 1000}, {v: 1000}, {v: 1000}]},
{c:[{v: 17}, {v: 1000}, {v: 1000}, {v: 1000}, {v: 1000}]},
{c:[{v: 18}, {v: 1000}, {v: 1000}, {v: 1000}, {v: 1000}]},
{c:[{v: 19}, {v: 1000}, {v: 1000}, {v: 1000}, {v: 1000}]},
{c:[{v: 20}, {v: 1000}, {v: 1000}, {v: 1000}, {v: 1000}]},
{c:[{v: 21}, {v: 1000}, {v: 1000}, {v: 1000}, {v: 1000}]},
{c:[{v: 22}, {v: 1000}, {v: 1000}, {v: 1000}, {v: 1000}]},
{c:[{v: 23}, {v: 1000}, {v: 1000}, {v: 1000}, {v: 1000}]}
]
}
推荐答案
以便直接从json创建google数据表，如下所示...
in order to create a google data table, directly from json, as follows...
var data = new google.visualization.DataTable(jsonData);
json数据必须采用非常特定的格式，请在此处.
the json data must be in a very specific format, found here.
关于特定图表的数据格式，
每个都有特定的格式，可以在这里.
as for the format of the data for a specific chart,
each has a specific format, the data format for line chart can be found here.
数据表中的第一列代表x轴，
它可以是任何类型(日期，数字，字符串等).
the first column in the data table represents the x-axis,
it can be of any type (date, number, string, etc...).
以下各列均应为数字，
代表图表中的每个系列或要绘制的线.
the following columns should all be numbers,
which represent each series in the chart, or line to be drawn.
因此需要绘制折线图的json示例，
在x轴上带有日期，
四行如下...
so an example of the json needed to draw a line chart,
with a date on the x-axis,
and four lines is as follows...
var jsonData = {
"cols": [
{"label": "Date", "type": "date"},
{"label": "Sales A", "type": "number"},
{"label": "Sales B", "type": "number"},
{"label": "Sales C", "type": "number"},
{"label": "Sales D", "type": "number"}
],
"rows": [
{"c":[{"v": "Date(2019, 10, 1)"}, {"v": 1000}, {"v": 2000}, {"v": 3000}, {"v": 4000}]},
{"c":[{"v": "Date(2019, 11, 1)"}, {"v": 1000}, {"v": 2000}, {"v": 3000}, {"v": 4000}]},
{"c":[{"v": "Date(2020, 0, 1)"}, {"v": 1000}, {"v": 2000}, {"v": 3000}, {"v": 4000}]},
{"c":[{"v": "Date(2020, 1, 1)"}, {"v": 1000}, {"v": 2000}, {"v": 3000}, {"v": 4000}]}
]
};
使用ajax获取json数据时，
不要使用-> async:false -不建议使用此选项.
代替使用 done promise方法，该方法将数据作为参数.
instead use the done promise method, which will have the data as an argument.
$.ajax({
url: "getData.php",
dataType: "json",
}).done(function (jsonData) { // <-- json data argument
});
请参阅以下工作片段，
在这里，我使用 fail promise方法对数据进行硬编码，
因为无法从该站点访问您的php页面.
在您的服务器上，它应该可以不使用fail方法...
see following working snippet,
here, I use the fail promise method to hard-code the data,
since your php page cannot be reached from this site.
on your server, it should work without the fail method...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var options = {
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Sales'
},
title: 'Today',
height: 600
};
var chart = new google.visualization.LineChart(document.getElementById('today'));
$.ajax({
url: 'getData.php',
dataType: 'json',
}).fail(function () {
var jsonData = {
"cols": [
{"label": "Date", "type": "date"},
{"label": "Sales A", "type": "number"},
{"label": "Sales B", "type": "number"},
{"label": "Sales C", "type": "number"},
{"label": "Sales D", "type": "number"}
],
"rows": [
{"c":[{"v": "Date(2019, 10, 1)"}, {"v": 1000}, {"v": 2000}, {"v": 3000}, {"v": 4000}]},
{"c":[{"v": "Date(2019, 11, 1)"}, {"v": 1000}, {"v": 2000}, {"v": 3000}, {"v": 4000}]},
{"c":[{"v": "Date(2020, 0, 1)"}, {"v": 1000}, {"v": 2000}, {"v": 3000}, {"v": 4000}]},
{"c":[{"v": "Date(2020, 1, 1)"}, {"v": 1000}, {"v": 2000}, {"v": 3000}, {"v": 4000}]}
]
};
drawChart(jsonData);
}).done(drawChart);
function drawChart(jsonData) {
var data = new google.visualization.DataTable(jsonData);
chart.draw(data, options);
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="today"></div>编辑
ajax调用有问题.
更改为...
there is a problem with the ajax call.
change from...
var jsonData = $.ajax({
url: 'getData.php',
dataType: 'json',
})
drawChart(jsonData);
}).done(drawChart);
更改为...
$.ajax({
url: 'getData.php',
dataType: 'json',
}).done(drawChart);
同样，您似乎缺少了load语句promise的结尾.
尝试此代码...
also, it appears you're missing the closing bracket to the load statement promise.
try this code...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var options = {
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Sales'
},
title: 'Today',
height: 600
};
var chart = new google.visualization.LineChart(document.getElementById('dagens'));
$.ajax({
url: 'getData.php',
dataType: 'json',
}).done(drawChart);
function drawChart(jsonData) {
var data = new google.visualization.DataTable(jsonData);
chart.draw(data, options);
}
});
这篇关于在JSON文件中编写什么以创建多个折线图HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
