gpt4 book ai didi

charts - 谷歌图表时间轴参与者绘制失败

转载 作者:行者123 更新时间:2023-12-02 01:32:56 26 4
gpt4 key购买 nike

我使用 Google Charts 创建了一个时间轴可视化,并添加了一个带有图表范围过滤器的仪表板,以允许人们四处移动甚至放大以便更清楚地查看某些条目。虽然它大部分都有效,但有时它会抛出“参与者未能绘制”错误。我已经查找了针对此类错误的其他响应,但找不到任何有效的响应。请参阅下面的示例:

据我所知,问题在于,在某个缩放级别时,工具提示(每个元素都有)没有显示。它被读取为 null,这会提示错误。谁能推荐一个修复程序?

代码如下:

<!DOCTYPE html>
<meta charset="utf-8">
<head>
<title>LeaP Pharmacy Student Path Data</title>
<style>
div.google-visualization-tooltip {
font-size: 0.9em;
padding: 10px;
width: 200px;
}
</style>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

</head>

<body style="font-family: Arial;border: 0 none;">
<div id="dashboard">

<div id="chart" style="position: relative; width: 985px; height: 200px;"></div>
<div>Select a time range to zoom in.</div>
<div id="control"></div>

</div>
<div id="junk_div" style="display: none;"></div>

<script type="text/javascript">
google.load('visualization', '1', {
packages: ['corechart', 'table', 'gauge', 'controls']
});
google.setOnLoadCallback(drawVisualization);

function drawVisualization() {
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard'));

var control = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'control',
'options': {
// Filter by the date axis.
'filterColumnIndex': 3,
'ui': {
'chartType': 'TimeLine',
'chartOptions': {
'width': 900,
'height': 70,
'chartArea': {
width: '100%', // make sure this is the same for the chart and control so the axes align right
height: '80%'
},
'hAxis': {
'baselineColor': 'none'
}
},
// This, this view has two columns: the start and end dates.
'chartView': {
'columns': [3, 4]
}
}
},
// Initial range: 2015-08-10 to 2015-08-10.
//'state': {'range': {'start': new Date(20150810185227),
// 'end': new Date(20150810205436)}
// }
});

var chart = new google.visualization.ChartWrapper({
'chartType': 'Timeline',
'containerId': 'chart',
'options': {
'width': 985,
'height': 600,
'chartArea': {
width: '100%', // make sure this is the same for the chart and control so the axes align right
height: '80%'
},
},
'view': {
'columns': [0, 1, 2, 3, 4]
}

});

var data = new google.visualization.DataTable();
data.addColumn({ type: 'string', id: 'Student' });
data.addColumn({ type: 'string', id: 'Event Type' });
data.addColumn({ type: 'string', role: 'tooltip', 'p': {'html': true}});
data.addColumn({ type: 'datetime', id: 'Start' });
data.addColumn({ type: 'datetime', id: 'End' });
data.addRows([
[ 'Student 571', 'Pretest', 'Student 571 began Biological Chemistry Learning Path Pretest', new Date(2015,08,10,18,52,02), new Date(2015,08,10,18,52,27) ],
[ 'Student 571', 'Learning Path', 'Student 571 watched Amino Acids videos', new Date(2015,08,10,18,52,27), new Date(2015,08,10,18,52,32) ],
[ 'Student 571', 'Learning Path', 'Student 571 watched Video: Bio102 water', new Date(2015,08,10,18,52,32), new Date(2015,08,10,18,52,33) ],
[ 'Student 571', 'Learning Path', 'Student 571 watched Amino Acids videos', new Date(2015,08,10,18,52,33), new Date(2015,08,10,18,52,40) ],
[ 'Student 571', 'Learning Path', 'Student 571 viewed Elements of the Major Organic Compounds of Life', new Date(2015,08,10,18,52,40), new Date(2015,08,10,18,52,55) ],
[ 'Student 571', 'Learning Path', 'Student 571 viewed Amino Acids videos', new Date(2015,08,10,18,52,55), new Date(2015,08,10,19,01,48) ],
[ 'Student 571', 'Supplemental Info', 'Student 571 viewed Carbohydrates Websites', new Date(2015,08,10,19,01,48), new Date(2015,08,10,19,01,49) ],
[ 'Student 571', 'Learning Path', 'Student 571 viewed Lipids Textbooks', new Date(2015,08,10,19,01,49), new Date(2015,08,10,19,02,13) ],
[ 'Student 571', 'Learning Path', 'Student 571 viewed Video: Bio102 Water', new Date(2015,08,10,19,02,13), new Date(2015,08,10,19,02,42) ],
[ 'Student 571', 'Learning Path', 'Student 571 watched Amino Acids videos', new Date(2015,08,10,19,02,42), new Date(2015,08,10,19,03,02) ],
[ 'Student 571', 'Learning Path', 'Student 571 watched Amino Acids videos', new Date(2015,08,10,19,03,02), new Date(2015,08,10,19,16,08) ],
[ 'Student 571', 'Learning Path', 'Student 571 watched Video: Bio102 Water', new Date(2015,08,10,19,16,08), new Date(2015,08,10,19,16,11) ],
[ 'Student 571', 'Learning Path', 'Student 571 viewed Elements of the Major Organic Compounds of Life', new Date(2015,08,10,19,16,11), new Date(2015,08,10,19,16,18) ],
[ 'Student 571', 'Learning Path', 'Student 571 viewed Biological Buffers Website 3 (animation)', new Date(2015,08,10,19,16,18), new Date(2015,08,10,19,16,42) ],
[ 'Student 571', 'Supplemental Info', 'Student 571 viewed Carbohydrates Websites', new Date(2015,08,10,19,16,42), new Date(2015,08,10,19,16,48) ],
[ 'Student 571', 'Learning Path', 'Student 571 viewed Lipids Textbooks', new Date(2015,08,10,19,16,48), new Date(2015,08,10,19,16,53) ],
[ 'Student 571', 'Supplemental Info', 'Student 571 viewed Nucleic Acids Websites', new Date(2015,08,10,19,16,53), new Date(2015,08,10,19,16,54) ],
[ 'Student 571', 'Supplemental Info', 'Student 571 watched Video: The Properties of Water', new Date(2015,08,10,19,16,54), new Date(2015,08,10,19,16,55) ],
[ 'Student 571', 'Supplemental Info', 'Student 571 viewed Lipids Websites', new Date(2015,08,10,19,16,55), new Date(2015,08,10,19,16,57) ],
[ 'Student 571', 'Supplemental Info', 'Student 571 viewed Complex Carbohydrates Are Formed by Linkage of Monosaccharides - Biochemistry - NCBI Bookshelf', new Date(2015,08,10,19,16,57), new Date(2015,08,10,19,17,03) ],
[ 'Student 571', 'Learning Path', 'Student 571 watched Amino Acids Videos', new Date(2015,08,10,19,17,03), new Date(2015,08,10,19,18,27) ],
[ 'Student 571', 'Questions', 'Student 571 answered Cell-surface receptors question correctly', new Date(2015,08,10,19,18,27), new Date(2015,08,10,19,18,59) ],
[ 'Student 571', 'Questions', 'Student 571 answered Cell-surface receptors question incorrectly', new Date(2015,08,10,19,18,59), new Date(2015,08,10,19,19,21) ],
[ 'Student 571', 'Questions', 'Student 571 answered Cell-surface receptors question correctly', new Date(2015,08,10,19,19,21), new Date(2015,08,10,19,19,27) ],
[ 'Student 571', 'Learning Path', 'Student 571 watched Video: Bio102 Water', new Date(2015,08,10,19,19,27), new Date(2015,08,10,19,19,43) ],
[ 'Student 571', 'Learning Path', 'Student 571 watched Video: Bio102 Water', new Date(2015,08,10,19,19,43), new Date(2015,08,10,19,19,56) ],
[ 'Student 571', 'Learning Path', 'Student 571 watched Amino Acids Videos', new Date(2015,08,10,19,19,56), new Date(2015,08,10,19,19,57) ],
[ 'Student 571', 'Learning Path', 'Student 571 watched Video: Bio102 Water', new Date(2015,08,10,19,19,57), new Date(2015,08,10,19,20,33) ],
[ 'Student 571', 'Learning Path', 'Student 571 watched Amino Acids Videos', new Date(2015,08,10,19,20,33), new Date(2015,08,10,19,21,00) ],
[ 'Student 571', 'Learning Path', 'Student 571 watched Amino Acids Videos', new Date(2015,08,10,19,21,00), new Date(2015,08,10,19,21,02) ],
[ 'Student 571', 'Learning Path', 'Student 571 watched Video: Bio102 Water', new Date(2015,08,10,19,21,02), new Date(2015,08,10,19,21,50) ],
[ 'Student 571', 'Learning Path', 'Student 571 watched Video: Bio102 Water', new Date(2015,08,10,19,21,50), new Date(2015,08,10,19,22,14) ],
[ 'Student 571', 'Questions', 'Student 571 answered Properties of Water question correctly', new Date(2015,08,10,19,22,14), new Date(2015,08,10,19,30,32) ],
[ 'Student 571', 'Learning Path', 'Student 571 viewed Elements of the Major Organic Compounds of Life', new Date(2015,08,10,19,30,32), new Date(2015,08,10,20,21,16) ],
[ 'Student 571', 'Learning Path', 'Student 571 viewed Biological Buffers Website 3 (animation)', new Date(2015,08,10,20,21,16), new Date(2015,08,10,20,22,01) ],
[ 'Student 571', 'Supplemental Info', 'Student 571 viewed Carbohydrates Websites', new Date(2015,08,10,20,22,01), new Date(2015,08,10,20,23,58) ],
[ 'Student 571', 'Learning Path', 'Student 571 viewed Lipids Textbooks', new Date(2015,08,10,20,23,58), new Date(2015,08,10,20,24,35) ],
[ 'Student 571', 'Supplemental Info', 'Student 571 viewed Nucleic Acids Websites', new Date(2015,08,10,20,24,35), new Date(2015,08,10,20,33,34) ],
[ 'Student 571', 'Supplemental Info', 'Student 571 watched Video: The Properties of Water', new Date(2015,08,10,20,33,34), new Date(2015,08,10,20,33,53) ],
[ 'Student 571', 'Supplemental Info', 'Student 571 viewed Lipids Websites', new Date(2015,08,10,20,33,53), new Date(2015,08,10,20,43,43) ],
[ 'Student 571', 'Supplemental Info', 'Student 571 viewed Complex Carbohydrates Are Formed by Linkage of Monosaccharides - Biochemistry - NCBI Bookshelf', new Date(2015,08, 10,20,43,43), new Date(2015,08, 10,20,53,28) ],
[ 'Student 571', 'Test Me', 'Student 571 scored 81% on Biological Chemistry Learning Path assessment', new Date(2015,08,10,20,53,28), new Date(2015,08,10,20,54,36) ]
]);

var options = {
tooltip: {isHtml: true}

};
dashboard.bind(control, chart);
dashboard.draw(data, options);
}
</script>
</body>

最佳答案

您需要设置 ui.minRangeSize 以便您的图表始终有内容可绘制。

或者您可以抑制错误,如本例所示...

google.load('visualization', '1', {
packages: ['corechart', 'table', 'gauge', 'controls']
});
google.setOnLoadCallback(drawVisualization);

function drawVisualization() {
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard'));

var control = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'control',
'options': {
'filterColumnIndex': 3,
'ui': {

// SET MIN RANGE
//'minRangeSize': (60 * 60 * 1000),


'chartType': 'TimeLine',
'chartOptions': {
'width': 900,
'height': 70,
'chartArea': {
width: '100%',
height: '80%'
},
'hAxis': {
'baselineColor': 'none'
}
},
'chartView': {
'columns': [3, 4]
}
}
},
});

google.visualization.events.addListener(control, 'error', onError);
function onError(error) {
console.log('error: ' + error.id + ' - ' + error.message);
google.visualization.errors.removeError(error.id);
}

var chart = new google.visualization.ChartWrapper({
'chartType': 'Timeline',
'containerId': 'chart',
'options': {
'width': 985,
'height': 600,
'chartArea': {
width: '100%',
height: '80%'
},
},
'view': {
'columns': [0, 1, 2, 3, 4]
}

});

var data = new google.visualization.DataTable();
data.addColumn({ type: 'string', id: 'Student' });
data.addColumn({ type: 'string', id: 'Event Type' });
data.addColumn({ type: 'string', role: 'tooltip', 'p': {'html': true}});
data.addColumn({ type: 'datetime', id: 'Start' });
data.addColumn({ type: 'datetime', id: 'End' });
data.addRows([
[ 'Student 571', 'Pretest', 'Student 571 began Biological Chemistry Learning Path Pretest', new Date(2015,08,10,18,52,02), new Date(2015,08,10,18,52,27) ],
[ 'Student 571', 'Learning Path', 'Student 571 watched Amino Acids videos', new Date(2015,08,10,18,52,27), new Date(2015,08,10,18,52,32) ],
[ 'Student 571', 'Learning Path', 'Student 571 watched Video: Bio102 water', new Date(2015,08,10,18,52,32), new Date(2015,08,10,18,52,33) ],
[ 'Student 571', 'Learning Path', 'Student 571 watched Amino Acids videos', new Date(2015,08,10,18,52,33), new Date(2015,08,10,18,52,40) ],
[ 'Student 571', 'Learning Path', 'Student 571 viewed Elements of the Major Organic Compounds of Life', new Date(2015,08,10,18,52,40), new Date(2015,08,10,18,52,55) ],
[ 'Student 571', 'Learning Path', 'Student 571 viewed Amino Acids videos', new Date(2015,08,10,18,52,55), new Date(2015,08,10,19,01,48) ],
[ 'Student 571', 'Supplemental Info', 'Student 571 viewed Carbohydrates Websites', new Date(2015,08,10,19,01,48), new Date(2015,08,10,19,01,49) ],
[ 'Student 571', 'Learning Path', 'Student 571 viewed Lipids Textbooks', new Date(2015,08,10,19,01,49), new Date(2015,08,10,19,02,13) ],
[ 'Student 571', 'Learning Path', 'Student 571 viewed Video: Bio102 Water', new Date(2015,08,10,19,02,13), new Date(2015,08,10,19,02,42) ],
[ 'Student 571', 'Learning Path', 'Student 571 watched Amino Acids videos', new Date(2015,08,10,19,02,42), new Date(2015,08,10,19,03,02) ],
[ 'Student 571', 'Learning Path', 'Student 571 watched Amino Acids videos', new Date(2015,08,10,19,03,02), new Date(2015,08,10,19,16,08) ],
[ 'Student 571', 'Learning Path', 'Student 571 watched Video: Bio102 Water', new Date(2015,08,10,19,16,08), new Date(2015,08,10,19,16,11) ],
[ 'Student 571', 'Learning Path', 'Student 571 viewed Elements of the Major Organic Compounds of Life', new Date(2015,08,10,19,16,11), new Date(2015,08,10,19,16,18) ],
[ 'Student 571', 'Learning Path', 'Student 571 viewed Biological Buffers Website 3 (animation)', new Date(2015,08,10,19,16,18), new Date(2015,08,10,19,16,42) ],
[ 'Student 571', 'Supplemental Info', 'Student 571 viewed Carbohydrates Websites', new Date(2015,08,10,19,16,42), new Date(2015,08,10,19,16,48) ],
[ 'Student 571', 'Learning Path', 'Student 571 viewed Lipids Textbooks', new Date(2015,08,10,19,16,48), new Date(2015,08,10,19,16,53) ],
[ 'Student 571', 'Supplemental Info', 'Student 571 viewed Nucleic Acids Websites', new Date(2015,08,10,19,16,53), new Date(2015,08,10,19,16,54) ],
[ 'Student 571', 'Supplemental Info', 'Student 571 watched Video: The Properties of Water', new Date(2015,08,10,19,16,54), new Date(2015,08,10,19,16,55) ],
[ 'Student 571', 'Supplemental Info', 'Student 571 viewed Lipids Websites', new Date(2015,08,10,19,16,55), new Date(2015,08,10,19,16,57) ],
[ 'Student 571', 'Supplemental Info', 'Student 571 viewed Complex Carbohydrates Are Formed by Linkage of Monosaccharides - Biochemistry - NCBI Bookshelf', new Date(2015,08,10,19,16,57), new Date(2015,08,10,19,17,03) ],
[ 'Student 571', 'Learning Path', 'Student 571 watched Amino Acids Videos', new Date(2015,08,10,19,17,03), new Date(2015,08,10,19,18,27) ],
[ 'Student 571', 'Questions', 'Student 571 answered Cell-surface receptors question correctly', new Date(2015,08,10,19,18,27), new Date(2015,08,10,19,18,59) ],
[ 'Student 571', 'Questions', 'Student 571 answered Cell-surface receptors question incorrectly', new Date(2015,08,10,19,18,59), new Date(2015,08,10,19,19,21) ],
[ 'Student 571', 'Questions', 'Student 571 answered Cell-surface receptors question correctly', new Date(2015,08,10,19,19,21), new Date(2015,08,10,19,19,27) ],
[ 'Student 571', 'Learning Path', 'Student 571 watched Video: Bio102 Water', new Date(2015,08,10,19,19,27), new Date(2015,08,10,19,19,43) ],
[ 'Student 571', 'Learning Path', 'Student 571 watched Video: Bio102 Water', new Date(2015,08,10,19,19,43), new Date(2015,08,10,19,19,56) ],
[ 'Student 571', 'Learning Path', 'Student 571 watched Amino Acids Videos', new Date(2015,08,10,19,19,56), new Date(2015,08,10,19,19,57) ],
[ 'Student 571', 'Learning Path', 'Student 571 watched Video: Bio102 Water', new Date(2015,08,10,19,19,57), new Date(2015,08,10,19,20,33) ],
[ 'Student 571', 'Learning Path', 'Student 571 watched Amino Acids Videos', new Date(2015,08,10,19,20,33), new Date(2015,08,10,19,21,00) ],
[ 'Student 571', 'Learning Path', 'Student 571 watched Amino Acids Videos', new Date(2015,08,10,19,21,00), new Date(2015,08,10,19,21,02) ],
[ 'Student 571', 'Learning Path', 'Student 571 watched Video: Bio102 Water', new Date(2015,08,10,19,21,02), new Date(2015,08,10,19,21,50) ],
[ 'Student 571', 'Learning Path', 'Student 571 watched Video: Bio102 Water', new Date(2015,08,10,19,21,50), new Date(2015,08,10,19,22,14) ],
[ 'Student 571', 'Questions', 'Student 571 answered Properties of Water question correctly', new Date(2015,08,10,19,22,14), new Date(2015,08,10,19,30,32) ],
[ 'Student 571', 'Learning Path', 'Student 571 viewed Elements of the Major Organic Compounds of Life', new Date(2015,08,10,19,30,32), new Date(2015,08,10,20,21,16) ],
[ 'Student 571', 'Learning Path', 'Student 571 viewed Biological Buffers Website 3 (animation)', new Date(2015,08,10,20,21,16), new Date(2015,08,10,20,22,01) ],
[ 'Student 571', 'Supplemental Info', 'Student 571 viewed Carbohydrates Websites', new Date(2015,08,10,20,22,01), new Date(2015,08,10,20,23,58) ],
[ 'Student 571', 'Learning Path', 'Student 571 viewed Lipids Textbooks', new Date(2015,08,10,20,23,58), new Date(2015,08,10,20,24,35) ],
[ 'Student 571', 'Supplemental Info', 'Student 571 viewed Nucleic Acids Websites', new Date(2015,08,10,20,24,35), new Date(2015,08,10,20,33,34) ],
[ 'Student 571', 'Supplemental Info', 'Student 571 watched Video: The Properties of Water', new Date(2015,08,10,20,33,34), new Date(2015,08,10,20,33,53) ],
[ 'Student 571', 'Supplemental Info', 'Student 571 viewed Lipids Websites', new Date(2015,08,10,20,33,53), new Date(2015,08,10,20,43,43) ],
[ 'Student 571', 'Supplemental Info', 'Student 571 viewed Complex Carbohydrates Are Formed by Linkage of Monosaccharides - Biochemistry - NCBI Bookshelf', new Date(2015,08, 10,20,43,43), new Date(2015,08, 10,20,53,28) ],
[ 'Student 571', 'Test Me', 'Student 571 scored 81% on Biological Chemistry Learning Path assessment', new Date(2015,08,10,20,53,28), new Date(2015,08,10,20,54,36) ]
]);

var options = {
tooltip: {isHtml: true}
};
dashboard.bind(control, chart);
dashboard.draw(data, options);
}
<script src="https://www.google.com/jsapi"></script>
<style>
div.google-visualization-tooltip {
font-size: 0.9em;
padding: 10px;
width: 200px;
}
</style>
<div id="dashboard">

<div id="chart" style="position: relative; width: 985px; height: 200px;"></div>
<div>Select a time range to zoom in.</div>
<div id="control"></div>

</div>
<div id="junk_div" style="display: none;"></div>

关于charts - 谷歌图表时间轴参与者绘制失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33045241/

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