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