突出显示Google图表栏onMouseOver标头

| 我目前正在使用Google Bar在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%\"},
                   });
           }
这是我在开发论坛上的第一篇文章,因此,对于我的 帖子构造不佳。 我非常感谢您对此提供的一些意见! 提前致谢, 约翰     
已邀请:
下面的示例应向您展示如何在鼠标悬停一些文本时突出显示图表中的条形图。 您可以使用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>
    

要回复问题请先登录注册