以下是创建折线图的代码。我试图在行注释的顶部添加图像。这是jsfiddle的演示。 这是代码:
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn({type: 'string', role: 'annotation'});
data.addColumn('number', 'Dogs');
data.addColumn('number', 'Cats');
data.addRows([
[0,null, 0, 1], [1,'', 10,3], [2,null, 23,6], [3,null, 17,7], [4,null, 18,4], [5,null, 9,7]
]);
var options = {
curveType : 'function',
hAxis: {
title: 'Time',
gridlines: {
color: 'transparent'
}
},
vAxis: {
title: 'Popularity',
gridlines: {
color: 'transparent'
}
},
annotations: {
style: 'line',
position: 'top'
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
我真的无法弄清楚如何做到这一点。有人做过这个吗?
答案 0 :(得分:1)
一旦'ready'
事件触发,您就可以向图表中添加元素
(或'animationfinish'
使用动画时)
首先,需要找到注释,这将是<rect>
个元素
与轴线类似,它们将'width'
1
但他们会有不同的'fill'
属性
(请记住这一点,如果在annotations
选项上设置了更多样式设置)
以下工作代码段找到注释行并将图像添加到顶部
google.charts.load('current', {
callback: drawBasic,
packages: ['corechart']
});
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn({type: 'string', role: 'annotation'});
data.addColumn('number', 'Dogs');
data.addColumn('number', 'Cats');
data.addRows([
[0, null, 0, 1],
[1, '', 10, 3],
[2, null, 23, 6],
[3, null, 17, 7],
[4, null, 18, 4],
[5, null, 9, 7]
]);
var options = {
annotations: {
position: 'top',
style: 'line'
},
hAxis: {
gridlines: {
color: 'transparent'
},
title: 'Time'
},
vAxis: {
gridlines: {
color: 'transparent'
},
title: 'Popularity'
},
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.LineChart(container);
google.visualization.events.addListener(chart, 'ready', function () {
Array.prototype.forEach.call(container.getElementsByTagName('rect'), function(rect) {
if ((rect.getAttribute('width') === '1') && (rect.getAttribute('fill') === '#999999')) {
var xPos = parseFloat(rect.getAttribute('x'));
var yPos = parseFloat(rect.getAttribute('y'));
var whiteHat = container.appendChild(document.createElement('img'));
whiteHat.src = 'http://findicons.com/files/icons/512/star_wars/16/clone_old.png';
whiteHat.className = 'whiteHat';
// 16x16 (image size in this example)
whiteHat.style.top = (yPos - 8) + 'px';
whiteHat.style.left = (xPos) + 'px';
}
});
});
chart.draw(data, options);
}
.whiteHat {
border: none;
position: absolute;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
答案 1 :(得分:0)
在'role': 'tooltip', 'p': {'html': true}});
和your data.addColumn
中添加options
在tooltip: { isHtml: true }
中使用:<div id="chart"></div>
。
HTML:
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'y');
data.addColumn('number', 'Line 1');
data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
data.addColumn('number', 'Line 2');
data.addRow([1, 1, '<img src="https://www.google.com/images/srpr/logo6w.png" style="width:30px;height:50px"/>', 2]);
data.addRow([2, 2,'<img src="https://www.google.com/images/srpr/logo6w.png" style="width:30px;height:50px"/>', 4]);
data.addRow([3, 3,'<img src="https://www.google.com/images/srpr/logo6w.png" style="width:30px;height:50px"/>', 6]);
data.addRow([4, 4,'<img src="https://www.google.com/images/srpr/logo6w.png" style="width:30px;height:50px"/>', 8]);
data.addRow([5, 5,'<img src="https://www.google.com/images/srpr/logo6w.png" style="width:30px;height:50px"/>', 10]);
var options = {
title: 'Graph',
hAxis: {
title: 'Time',
gridlines: {
color: 'transparent'
}
},
vAxis: {
title: 'Popularity',
gridlines: {
color: 'transparent'
}
},
annotations: {
style: 'line',
position: 'top'
},
tooltip: {isHtml: true},
};
var chart = new google.visualization.LineChart(document.getElementById('chart'));
chart.draw(data, options);
}
google.load("visualization", "1", {
packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);
JavaScript的:
(?i)(\b\w+\b)(\s+\1\b)+
见JsFiddle。