Google图表时间轴参与者绘制失败

Question

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

https://groups.google.com/forum/#!topic/google-visualization-api/AFfEjG6lG7k
Google Chart with slicer returns: One or more participants failed to draw()×
One or more participants failed to draw()
One or more participants failed to draw(): error

据我所知，问题是，当处于特定缩放级别时，工具提示（每个元素都有）没有显示。它被读取为 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>

Answer 1

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

或者您可以取消 error，如本例所示...

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>

Google图表时间轴参与者绘制失败

Google Chart Timeline Participants Failed to Draw

charts

timeline

google-visualization