GoogleマップバーをonMouseOverヘッダーにハイライト表示

私は現在、Googleバーチャートを使用してDjangoのプロジェクトで様々なデータを表示しています。私は Javascriptでかなり経験していませんが、与えられた例にはのおかげで、棒グラフが意図したとおりに動作するようになっています。マウスがヘッダ「ソルベンシー」の上にあるときにGoogleマップバーを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%"}, 
        }); 
      }

これは、開発フォーラムでの私の最初の投稿ですので、私のポストが不十分に構築された場合、私はお詫び申し上げます。

私はこの点について非常に感謝しています！ありがとうございます。 Johan

出典

2011-05-23 Johan

HTML出力を表示してください。 Djangoコードは役に立ちません。 –

以下のサンプルでは、テキストのホバー上でチャートのバーを強調表示する方法を示します。 setSelection() methodを使用してください。限り、ドキュメントは一度に1つの要素のハイライトだけがサポートされているので、残念ながら私はあなたが好きな列のすべてをハイライトすることができるとは思わない。

<!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

GoogleマップバーをonMouseOverヘッダーにハイライト表示

答えて

関連する問題