将Html标记放入Google图表

时间:2014-07-19 17:23:39

标签: javascript charts google-visualization

我正在使用谷歌图表,我想放置Magnolia Room的锚标签,而不是单独的Magnolia Room有没有办法做到这一点? 谷歌图表链接
https://developers.google.com/chart/interactive/docs/gallery/timeline
Javascript代码:

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization',
       'version':'1','packages':['timeline']}]}"></script>
    <script type="text/javascript">
        google.setOnLoadCallback(drawChart);
        function drawChart() {
            var container = document.getElementById('example5.3');
            var chart = new google.visualization.Timeline(container);
            var dataTable = new google.visualization.DataTable();
            dataTable.addColumn({ type: 'string', id: 'Room' });
            dataTable.addColumn({ type: 'string', id: 'Name' });
            dataTable.addColumn({ type: 'date', id: 'Start' });
            dataTable.addColumn({ type: 'date', id: 'End' });
            dataTable.addRows([
                [ '<a>Magnolia Room</a>' ,  'CSS Fundamentals',    new Date(0,0,0,test,0,0),  new Date(0,0,0,14,0,0) ],
                [ 'Magnolia Room',  'Intro JavaScript',    new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
                [ 'Magnolia Room',  'Advanced JavaScript', new Date(0,0,0,16,30,0), new Date(0,0,0,19,0,0) ],
                [ 'Gladiolus Room', 'Intermediate Perl',   new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
                [ 'Gladiolus Room', 'Advanced Perl',       new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
                [ 'Gladiolus Room', 'Applied Perl',        new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ],
                [ 'Petunia Room',   'Google Charts',       new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
                [ 'Petunia Room',   'Closure',             new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
                [ 'Petunia Room',   'App Engine',          new Date(0,0,0,21,30,0), new Date(0,0,1,0,30,0) ]]);

            var options = {
                timeline: { colorByRowLabel: true },
                backgroundColor: '#ffd'
            };

            chart.draw(dataTable, options);
        }
    </script>

我找到了为此设置事件的代码,但我不知道为什么它不起作用:

    google.visualization.events.addListener(chart, 'click', function (e) {
        var match = e.targetID.match(/vAxis#\d+#label#(\d+)/);
        if (match) {
            var rowIndex = parseInt(match[1]);
            var axisLabel = data.getValue(rowIndex, 0);
            alert(axisLabel);
        }
    });

0 个答案:

没有答案