Question

我目前正在使用谷歌栏处理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%"},
                   });
           }

这是我在开发论坛上的第一篇文章，所以如果我的话，我道歉邮差很差。

我非常感谢有关此事的一些意见！提前致谢，约翰

Answer 1

下面的示例应该向您展示如何在悬停某些文字时突出显示图表中的条形图。您可以使用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>

突出显示谷歌图表栏onMouseOver标题

1 个答案: