Блог

Главная - Вопросы по программированию - Выделение полос диаграммы Google при наведении мыши на заголовок

Выделение полос диаграммы Google при наведении мыши на заголовок

#google-visualization #bar-chart

#google-визуализация #столбчатая диаграмма

Вопрос:

В настоящее время я работаю с проектом на Django, используя столбчатые диаграммы Google для отображения различных данных. Я довольно неопытен в 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 amp; 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%"},
                   });
           }

Это мой первый пост на форуме разработчиков, поэтому я приношу извинения, если мой
сообщение плохо сконструировано.

Я был бы очень признателен за некоторую информацию по этому поводу! Заранее спасибо, Йохан

Комментарии:

1. Пожалуйста, покажите вывод HTML. Код Django бесполезен.

Ответ №1:

Приведенный ниже пример должен показать вам, как выделить полосу на вашей диаграмме при наведении курсора мыши на некоторый текст. Вы делаете это с помощью метода 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>