突出顯示谷歌圖表酒吧onMouseOver標題

我目前正在與Django項目使用谷歌圖表圖表來顯示各種數據。我對 Javascript很有經驗，但已獲得條形圖按預期工作，感謝提供的示例。突出顯示谷歌圖表酒吧onMouseOver標題

我的目標是有一個JavaScript，突出的酒吧之一，當鼠標懸停在正文一個字，即當鼠標懸停頭「償付能力」，最新的償付能力欄應突出（或者優選所有償付能力棒！）。

我的條形圖代碼讀取：

  google.load("visualization", "1", {packages:["corechart"]}); 
      google.setOnLoadCallback(drawChart); 
        function drawChart() { 
        var data = new google.visualization.DataTable(); 
        data.addColumn('string', 'Year'); 
        data.addColumn('number', 'Solvency'); 
        data.addColumn('number', 'Margin'); 
        data.addRows({{ to_annual_report_list|length }}); 

        {% for annual_report in to_annual_report_list reversed %} 
          data.setValue({{forloop.counter0}}, 0,'{{ annual_report.year }}'); 
        {% endfor %} 

        {% for solvency in solvency_list reversed %} 
          data.setValue({{forloop.counter0}}, 1, {{ solvency|floatformat:"2" }}); 
        {% endfor %} 

        {% for margin in margin_list reversed %} 
          data.setValue({{forloop.counter0}}, 2, {{ margin|floatformat:"2"}}); 

        {% var chart = new google.visualization.ColumnChart(document.getElementById('bar_chart_div')); 
        chart.draw(data, { 
          width: 400, 
          height: 240, 
          title: '{{to_company.name}} - Solvency & Margin', 
          titleTextStyle: {color: '#000', fontName: 'Lucida Sans',fontSize:12}, 
          titlePosition: 'out', 
          hAxis: {titleTextStyle: {color: '#000'}, textPosition: in'}, 
          vAxis: {title: '%', titleTextStyle: {color: '#000'}, textPosition:'out'}, 
          axisTitlesPosition: 'out', 
          legend: 'bottom', 
          legendTextStyle:{ fontSize: 12 }, 
          colors: ['#58db25', '#2e7114', '#4ec221'], 
          chartArea: {left: 30, top: 40, width:"100%",height:"70%"}, 
        }); 
      }

這是我的一個發展論壇的第一篇文章，所以我很抱歉，如果我的職位是結構不佳。

我非常感謝這方面的一些意見！在此先感謝，約翰

來源

2011-05-23 Johan

請顯示HTML輸出。 Django代碼沒有用處。 – 2011-05-23 16:48:44

下面的示例應該告訴您如何突出顯示您的圖表中的一個欄上懸停的某些文本。你這樣做使用setSelection() method。就文檔而言，只支持一次突出顯示一個元素，所以不幸的是我不認爲您可以突出顯示所有的列。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <script type="text/javascript" src="http://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
     google.load('visualization', '1.1', {packages: ['barchart']}); 
    </script> 
    <script type="text/javascript"> 
     function drawVisualization() { 
     // Create and populate the data table. 
     var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'Year'); 
     data.addColumn('number', 'Sales'); 
     data.addColumn('number', 'Expenses'); 
     data.addRows(4); 
     data.setValue(0, 0, '2004'); 
     data.setValue(0, 1, 1000); 
     data.setValue(0, 2, 400); 
     data.setValue(1, 0, '2005'); 
     data.setValue(1, 1, 1170); 
     data.setValue(1, 2, 460); 
     data.setValue(2, 0, '2006'); 
     data.setValue(2, 1, 660); 
     data.setValue(2, 2, 1120); 
     data.setValue(3, 0, '2007'); 
     data.setValue(3, 1, 1030); 
     data.setValue(3, 2, 540); 

     chart = new google.visualization.BarChart(document.getElementById('visualization')); 
     chart.draw(data, {width: 400, height: 240, title: 'Company Performance', 
          vAxis: {title: 'Year', titleTextStyle: {color: 'red'}} 
         }); 
     } 
     google.setOnLoadCallback(drawVisualization); 
    </script> 
    </head> 
    <body style="font-family: Arial;border: 0 none;"> 
    <p> Here is some text to <a href="#" onmouseover="chart.setSelection([{row:2,column:2}]); return false">hover over</a></p> 
    <div id="visualization" style="width: 600px; height: 400px;"></div> 
    </body> 
</html>

來源

2011-05-26 00:24:59 oli

非常感謝！這正是我需要的。 – Johan 2011-05-31 18:24:10

突出顯示谷歌圖表酒吧onMouseOver標題

回答

相關問題