Google visualization 在页眉上方突出显示谷歌图表栏
我目前正在Django使用google bar进行一个项目 用于显示各种数据的图表。我对这方面很缺乏经验 Javascript，但是已经让条形图按预期工作，谢谢 根据提供的示例 我的目标是有一个javascript，当 鼠标位于文本正文中的单词上方，即鼠标位于上方时 标题“偿付能力”，最新的偿付能力栏应突出显示 （或者最好是所有偿付能力条！） 我的条形图代码如下：Google visualization 在页眉上方突出显示谷歌图表栏,google-visualization,bar-chart,Google Visualization,Bar Chart,我目前正在Django使用google bar进行一个项目 用于显示各种数据的图表。我对这方面很缺乏经验 Javascript，但是已经让条形图按预期工作，谢谢 根据提供的示例 我的目标是有一个javascript，当 鼠标位于文本正文中的单词上方，即鼠标位于上方时 标题“偿付能力”，最新的偿付能力栏应突出显示 （或者最好是所有偿付能力条！） 我的条形图代码如下： google.load("visualization", "1", {packages:["corechart
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%"},
});
}
Johan下面的示例应该向您展示如何在图表中悬停某些文本时突出显示条形图。 您可以使用。正如文档所说，一次只支持高亮显示一个元素，所以不幸的是，我不认为您能够高亮显示所需的所有列
<!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>
load（'visualization'，'1.1'，{packages:['barchart']}）；
函数drawVisualization（）{
//创建并填充数据表。
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'Year'）；
data.addColumn（'number'，'Sales'）；
data.addColumn（“数字”、“费用”）；
数据。添加行（4）；
数据集值（0,0，'2004'）；
数据设置值（0，1，1000）；
数据设置值（0,2400）；
数据。设定值（1,0，'2005'）；
数据设置值（1,1170）；
数据。设定值（1，2460）；
数据。设定值（2,0，'2006'）；
数据。设定值（2，1660）；
数据设置值（2,21120）；
数据集值（3,0，'2007'）；
数据。设定值（3，1，1030）；
数据设置值（3,2540）；
chart=新的google.visualization.BarChart（document.getElementById（'visualization'）；
图表.绘图（数据，{宽：400，高：240，标题：'公司业绩'，
变量：{title:'Year'，titleTextStyle:{color:'red'}
});
}
setOnLoadCallback（drawVisualization）；
这里有一些文本要修改