google-visualization 相关问题

我有一个简单的 Google Piechart 和一个带有文本的 div： <p>我有一个简单的 Google Piechart 和一个带有文本的 div：</p> <pre><code><script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> // loading the visualization module google.load("visualization", "1", { packages: ["corechart"] }); // function to compose and draw the chart function trilulilu () { // variable with the data, an array of array's // in which the first position are the column names var data = google.visualization.arrayToDataTable([ ['Food', 'How much people like it'], ['Sausage', 20], ['Pizza', 40], ['Fish n Fries', 5], ['Sushi', 30], ['Ciorba', 5], ]); // options for chart display var options = { title: 'Food', // chart title is3D: true // false for 2d and true for 3d. Default is false }; // create a new PieChart object that receives // as param a div where the chart will be rendered var chart = new google.visualization.PieChart(document.getElementById('chart_div')); // draw with args and options chart.draw(data, options); } // function to be called after loading google.setOnLoadCallback(trilulilu); </script> </code></pre> 图表相关信息<p></p> <p>当我将鼠标悬停在图表的寿司切片上时，是否可以通过 id="sushi" 的 div 中的 Javascript 触发更改（例如背景颜色的更改）？</p> </question> <answer tick="false" vote="0"> <p>您可以通过在 Google PieChart 的寿司片上创建悬停效果来将 <pre><code>div</code></pre> 的背景颜色更改为您选择的 <pre><code>id</code></pre> 来实现此目的。在这种情况下<pre><code>sushi</code></pre>。看看：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Google PieChart Hover Example</title> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(trilulilu); function trilulilu() { var data = google.visualization.arrayToDataTable([ ['Food', 'How much people like it'], ['Sausage', 20], ['Pizza', 40], ['Fish n Fries', 5], ['Sushi', 30], ['Ciorba', 5], ]); var options = { title: 'Food', is3D: true }; var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data, options); google.visualization.events.addListener(chart, 'onmouseover', function(e) { if (data.getValue(e.row, 0) === 'Sushi') { document.getElementById('sushi').style.backgroundColor = 'yellow'; } }); google.visualization.events.addListener(chart, 'onmouseout', function(e) { if (data.getValue(e.row, 0) === 'Sushi') { document.getElementById('sushi').style.backgroundColor = ''; } }); } </script> </head> <body> <div id="chart_div" style="width: 400px; height: 300px;"></div> <div id="sushi">Information related to the chart</div> </body> </html></code></pre> </div> </div> <p></p> <p>当鼠标悬停在寿司片上时，这会将 div 的背景颜色更改为黄色，并在鼠标离开切片时重置它。确保在 HTML 中使用 id 为 <pre><code>div</code></pre> 的 <pre><code>sushi</code></pre>。</p> </answer> </body></html>

javascript html google-visualization

回答 0 投票 0

google-visualization 相关问题

最新问题