Tooltips for multiple lines Google Line Chart

StackOverflow https://stackoverflow.com/questions/22601209

문제

I am wondering if anyone knows how you would go about adding tooltips to multiple lines of data with Google Line Charts using DataTable, addColumn and addRow?

I've seen it done using other methods, but that is quite hard in my project and I feel like dumbass for not figuring this out. Anyways, I've dumbed down my code to present the essentials of my problem.

As you see, the tooltip shows for Line 2, but not for Line 1. My question is this: How do I add a tooltip to Line 1 using this method? My code: http://jsfiddle.net/Qquse/550/

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('number', 'y');
        data.addColumn('number', 'Line 1');
        data.addColumn('number', 'Line 2');
        data.addColumn({type: 'string', role: 'tooltip'});
        data.addRow([1, 1, 2, "Some fancy tooltip"]);
        data.addRow([2, 2, 4, "Some fancy tooltip"]);
        data.addRow([3, 3, 6, "Some fancy tooltip"]);
        data.addRow([4, 4, 8, "Some fancy tooltip"]);
        data.addRow([5, 5, 10, "Some fancy tooltip"]);
        var options = {
            title: 'Graph'
        };

       var chart = new google.visualization.LineChart(document.getElementById('chart'));
       chart.draw(data, options);
    }
    google.load("visualization", "1", {packages: ["corechart"]});
    google.setOnLoadCallback(drawChart);
</script>
</head>
<body>
<div id="chart"></div>
</body>
</html>
도움이 되었습니까?

해결책

I tried adding both DataColumns first, then the tooltips. Turns out it had to be in this order:

data.addColumn('number', 'y');
data.addColumn('number', 'Line 1');
data.addColumn({type: 'string', role: 'tooltip'});
data.addColumn('number', 'Line 2');
data.addColumn({type: 'string', role: 'tooltip'});

instead of

data.addColumn('number', 'y');
data.addColumn('number', 'Line 1');
data.addColumn('number', 'Line 2');
data.addColumn({type: 'string', role: 'tooltip'});
data.addColumn({type: 'string', role: 'tooltip'});

Updated working fiddle: http://jsfiddle.net/Qquse/1207/

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top