1

我目前正在 Django 中使用谷歌条形图显示各种数据的项目。由于提供的示例，我对 Javascript 非常缺乏经验，但已经让条形图按预期工作。

我的目标是有一个 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%"},
                   });
           }

这是我在开发论坛上的第一篇文章，如果我的文章结构不佳，我深表歉意。

我非常感谢您对此的一些意见！在此先感谢，约翰

4

1 回答 1

0

下面的示例应该向您展示如何在悬停某些文本时突出显示图表中的条形。您可以使用setSelection() 方法执行此操作。就文档而言，一次只支持突出显示一个元素，所以不幸的是，我认为您无法突出显示您想要的所有列。

<!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-26T00:24:59.210 回答