将链接插入Google Charts api数据？
Mik*_*ike 11 javascript google-visualization web
我一直在Google图表游戏中玩谷歌图表:
我一直在玩的代码是这样的:
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Year', 'Austria'],
['2003', 1336060],
['2004', 1538156],
['2005', 1576579],
['2006', 1600652],
['2007', 1968113],
['2008', 1901067]
]);
// Create and draw the visualization.
new google.visualization.BarChart(document.getElementById('visualization')).
draw(data,
{title:"Yearly Coffee Consumption by Country",
width:600, height:400,
vAxis: {title: "Year"},
hAxis: {title: "Cups"}}
);
}
这给了我一个很好的图表,看起来像这样:
我试图让这个图表符合我的网站的需要,为此,我需要在左边的链接到另一个页面.因此,例如,2003年将是用户可以单击ans的链接,因此2004年等.
我试着这样做:
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Year', 'Austria'],
['<a href="url">Link text</a>', 1336060],
['2004', 1538156],
['2005', 1576579],
['2006', 1600652],
['2007', 1968113],
['2008', 1901067]
]);
// Create and draw the visualization.
new google.visualization.BarChart(document.getElementById('visualization')).
draw(data,
{title:"Yearly Coffee Consumption by Country",
width:600, height:400,
vAxis: {title: "Year"},
hAxis: {title: "Cups"}}
);
}
但我只能希望它变得那么容易而事实并非如此.有谁知道这是否可能？
Mar*_*ler 15
Manzoid的答案很好,但"仍需要一些装配",因为它只显示一个警告框而不是跟随链接.这是一个更完整的答案,但它使条形可点击而不是标签.我创建一个包含链接的DataTable,然后从中创建一个DataView以选择我想要显示的列.然后当select事件发生时,我只是从原始DataTable中检索链接.
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'link', 'Austria'],
['2003', 'http://en.wikipedia.org/wiki/2003', 1336060],
['2004', 'http://en.wikipedia.org/wiki/2004', 1538156],
['2005', 'http://en.wikipedia.org/wiki/2005', 1576579],
['2006', 'http://en.wikipedia.org/wiki/2006', 1600652],
['2007', 'http://en.wikipedia.org/wiki/2007', 1968113],
['2008', 'http://en.wikipedia.org/wiki/2008', 1901067]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 2]);
var options = {title:"Yearly Coffee Consumption by Country",
width:600, height:400,
vAxis: {title: "Year"},
hAxis: {title: "Cups"}};
var chart = new google.visualization.BarChart(
document.getElementById('chart_div'));
chart.draw(view, options);
var selectHandler = function(e) {
window.location = data.getValue(chart.getSelection()[0]['row'], 1 );
}
google.visualization.events.addListener(chart, 'select', selectHandler);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 900px;"></div>
</body>
</html>
这是非常重要的,因为您看到的输出是SVG,而不是HTML.示例中的那些标签("2004","2005"等)嵌入在SVG文本节点中,因此在其中插入原始HTML标记将不会呈现为HTML.
解决方法是扫描包含目标值的文本节点(同样,"2004","2005"等)并用ForeignObject元素替换它们. ForeignObject元素可以包含常规HTML.然后需要将它们定位在原始SVG文本节点所处的位置或多或少.
这是一个说明所有这些的示例代码段.它根据您的具体示例进行了调整,因此当您切换到渲染任何实际数据时,您将需要相应地修改和概括此代码段.
// Note: You will probably need to tweak these deltas
// for your labels to position nicely.
var xDelta = 35;
var yDelta = 13;
var years = ['2003','2004','2005','2006','2007','2008'];
$('text').each(function(i, el) {
if (years.indexOf(el.textContent) != -1) {
var g = el.parentNode;
var x = el.getAttribute('x');
var y = el.getAttribute('y');
var width = el.getAttribute('width') || 50;
var height = el.getAttribute('height') || 15;
// A "ForeignObject" tag is how you can inject HTML into an SVG document.
var fo = document.createElementNS("http://www.w3.org/2000/svg", "foreignObject")
fo.setAttribute('x', x - xDelta);
fo.setAttribute('y', y - yDelta);
fo.setAttribute('height', height);
fo.setAttribute('width', width);
var body = document.createElementNS("http://www.w3.org/1999/xhtml", "BODY");
var a = document.createElement("A");
a.href = "http://yahoo.com";
a.setAttribute("style", "color:blue;");
a.innerHTML = el.textContent;
body.appendChild(a);
fo.appendChild(body);
// Remove the original SVG text and replace it with the HTML.
g.removeChild(el);
g.appendChild(fo);
}
});
未成年人注意,这里是有一点的jQuery为了方便,但可以更换 $('text')使用document.getElementsByTagName("svg")[0].getElementsByTagName("text").
- 是否有任何图表api,我可以更轻松地做到这一点？ (2认同)
由于SVG嵌入路径(可以理解)太毛茸茸,你想要捣乱,让我们尝试一种完全不同的方法.假设你可以灵活地改变你的功能规范,使条形图是可点击的,而不是标签,那么这是一个更简单的解决方案.
alert在此代码段中查找,您将自定义以执行重定向的部分.
function drawVisualization() {
// Create and populate the data table.
var rawData = [
['Year', 'Austria'],
['2003', 1336060],
['2004', 1538156],
['2005', 1576579],
['2006', 1600652],
['2007', 1968113],
['2008', 1901067]
];
var data = google.visualization.arrayToDataTable(rawData);
// Create and draw the visualization.
var chart = new google.visualization.BarChart(document.getElementById('visualization'));
chart.draw(data,
{title:"Yearly Coffee Consumption by Country",
width:600, height:400,
vAxis: {title: "Year"},
hAxis: {title: "Cups"}}
);
var handler = function(e) {
var sel = chart.getSelection();
sel = sel[0];
if (sel && sel['row'] && sel['column']) {
var year = rawData[sel['row'] + 1][0];
alert(year); // This where you'd construct the URL for this row, and redirect to it.
}
}
google.visualization.events.addListener(chart, 'select', handler);
}