javascript - Jinja 的 Google Visualization Chart Multiple LineChart TimeSeries
问题描述
我有来自 Jinja 的数据,其中包含每个用户的数据。它包含这种数据:
{
{"user": "test1", "daily_scores": [0: "date":12/11/12, "score": 30, 1: "date":12/12/12, "score": 40 ]},
{"user": "test2", "daily_scores": [0: "date":12/11/12, "score": 30, 1: "date":12/12/12, "score": 20 ]},
{"user": "test3", "daily_scores": [0: "date":12/1/12, "score": 30, 1: "date":12/12/12, "score": 30 ]},
}
我能够在 JS 中正确格式化它并在谷歌可视化中使用,但是它没有正确显示,它只显示一个用户:
我对谷歌可视化的尝试:
<script>
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawCurveTypes);
function drawCurveTypes() {
datas = JSON.parse({{persons_performance|tojson|safe}});
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Score');
data.addColumn({ type: 'string', id: 'Person', role: 'annotation' });
for (var i = 0; i < datas.length; i++) {
person_name = datas[i]['user'];
daily_score_datas = datas[i]['daily_scores']
console.log(daily_score_datas)
for (var i = 0; i < daily_score_datas.length; i++) {
daily_score = daily_score_datas[i];
daily_score_date = new Date(daily_score['date']);
daily_score_score = daily_score['score'];
data.addRow([daily_score_date, daily_score_score, person_name]);
}
}
var options = {
{#chartArea:{ width:"100%", height:"100%"},#}
title: "Person Performance over Time",
height: 500,
width: 1300,
hAxis: {
title: 'Time',
textPosition: 'none'
},
vAxis: {
title: 'Score'
},
series: {
1: {curveType: 'function'}
},
legend: {position: 'none'}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
这很奇怪,因为我显然有三列和每行三个值。我需要帮助来制作它,以便每人显示多行,每个人的分数都在一行中。谢谢!
解决方案
为了在图表中创建多条线,
您需要数据表中的多个系列或列。
换句话说,您需要为每个用户提供一列...
所以而不是单列...
data.addColumn('date', 'Date');
data.addColumn('number', 'Score');
您需要多个,每个用户一个...
data.addColumn('date', 'Date');
data.addColumn('number', 'User 1');
data.addColumn('number', 'User 2');
data.addColumn('number', 'User 3');
我们可以根据提供的数据动态构建列,
但我们的方法会有所不同。
我们需要在循环数据时添加列,
然后保存我们创建的列的列索引。
这意味着我们需要单独设置每一行上每个单元格的值。
例如,首先创建带有日期列的数据表...
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
然后当我们遍历数据时,添加用户列......
datas.forEach(function (row) {
// create the data table column for the user and user annotation
var person_name = row['user'];
var column_index = data.addColumn('number', person_name);
var column_index_ann = data.addColumn({type: 'string', role: 'annotation'});
// next, loop the scores for the user
var daily_score_datas = row['daily_scores'];
daily_score_datas.forEach(function (daily_score) {
// get score values
var daily_score_date = new Date(daily_score['date']);
var daily_score_score = daily_score['score'];
// add a new blank row and save row index
var row_index = data.addRow();
// set values for the date, user, and user annotation
data.setValue(row_index, 0, daily_score_date);
data.setValue(row_index, column_index, daily_score_score);
data.setValue(row_index, column_index_ann, person_name);
});
});
请参阅以下工作示例...
google.charts.load('current', {
packages: ['corechart']
}).then(function drawCurveTypes() {
var datas = [
{"user": "test1", "daily_scores": [{"date":"12/11/2021", "score": 0}, {"date":"12/12/2021", "score": 40}]},
{"user": "test2", "daily_scores": [{"date":"12/11/2021", "score": 10}, {"date":"12/12/2021", "score": 20}]},
{"user": "test3", "daily_scores": [{"date":"12/11/2021", "score": 20}, {"date":"12/12/2021", "score": 30}]},
];
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
datas.forEach(function (row) {
// create the data table column for the user and user annotation
var person_name = row['user'];
var column_index = data.addColumn('number', person_name);
var column_index_ann = data.addColumn({type: 'string', role: 'annotation'});
// next, loop the scores for the user
var daily_score_datas = row['daily_scores'];
daily_score_datas.forEach(function (daily_score) {
// get score values
var daily_score_date = new Date(daily_score['date']);
var daily_score_score = daily_score['score'];
// add a new blank row and save row index
var row_index = data.addRow();
// set values for the date, user, and user annotation
data.setValue(row_index, 0, daily_score_date);
data.setValue(row_index, column_index, daily_score_score);
data.setValue(row_index, column_index_ann, person_name);
});
});
var options = {
//chartArea: {width:"100%", height:"100%"},
title: "Person Performance over Time",
height: 500,
width: 1300,
hAxis: {
title: 'Time',
textPosition: 'none'
},
vAxis: {
title: 'Score'
},
series: {
1: {curveType: 'function'}
},
legend: {position: 'none'}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
推荐阅读
- sql - 使用 NodeJS + MongoDB(或 SQL)实现搜索算法
- groovy - 当未定义其他 var 时,groovy 使用 var
- angular - 在同一页面角度中多次使用同一组件时避免多次 api 调用
- r - 有没有办法在openxlsx的write.xlsx函数中将默认覆盖改成yes?
- javascript - 如何在 JSX 中实现 forEach() - React Native for Custom Headers
- python - 如何将事务矩阵导入 Python?
- amazon-cognito - AWS Cognito - 以编程方式获取刷新令牌到期
- angular - 在 Angular 应用程序中配置 API URL
- javascript - 如何在悬停此元素时使光标跟随器与另一个 div 的位置/大小相同
- ffmpeg - ffmpeg 无法识别的选项'--enable-libopus'