gpt4 book ai didi

javascript - Google 可视化 - AnnotatedTimeLine 上的多行

转载 作者:行者123 更新时间:2023-11-28 10:34:47 25 4
gpt4 key购买 nike

有人能给我一个 AnnotatedTimeLine 可视化的简单示例吗?尽管文档讨论了多行,但我能找到的所有示例都只有一行。

如果您感觉特别友善,您可以给我一个示例,说明该示例的(python)数据源架构是什么样的。

提前致谢。

最佳答案

我现在可以自己回答这个问题:

<html>
<head>
<title>Home</title>
<script src="http://www.google.com/jsapi?YOUR_KEY"></script>
<script type="text/javascript">
google.load("jquery", "1");
google.load("jqueryui", "1")
google.load('visualization', '1', {'packages':['annotatedtimeline']});

google.setOnLoadCallback(init);;

function draw_timeline() {
var url = "http://YOUR_GOOGLE_DATA_SOURCE_CALL";
var query = new google.visualization.Query(url);
query.send(callback_draw_timeline);

function callback_draw_timeline(response) {
if (response.isError()) {
alert("Error in query: " + response.getMessage());
return;
};
var data = response.getDataTable();
var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('timeline'));
chart.draw(data, {title: 'Title'} );
};
};

function init() {
draw_timeline();
};

</script>

<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div id="timeline" style='height: 600px; width=100%'>Timeline</div>
</body></html>

然后在数据源中:

schema = { 'time': ("datetime", "Time"),
'col1': ("number", 'Column_1'),
'col2': ("number", 'Column_2'),
'col3': ("number", 'Column_3') }
data = [ { 'time': datetime(2009, 11, 24, 12, 31, 0), 'col1': 23, 'col2': 25, 'col3': 20 },
{ 'time': datetime(2009, 11, 24, 12, 32, 0), 'col1': 31, 'col2': 22, 'col3': 22 },
{ 'time': datetime(2009, 11, 24, 12, 33, 0), 'col1': 21, 'col2': 32, 'col3': 22 },
]
data_table = gviz_api.DataTable(schema)
data_table.LoadData(data)
response.data += data_table.ToJSonResponse(columns_order=(order))
return response

关于javascript - Google 可视化 - AnnotatedTimeLine 上的多行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1779001/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com