谷歌图表,我想在图表中某些点的右侧写一些文字。我该怎么做?
图表有三个不同的系列低价、高价、倍数,应该有一条虚线从“低”值到“倍数”值。 X 轴应该有像 PC#1、PC#2、PC#3 等刻度。此外,每个点都应该在图表的右侧有它的值,而不是作为工具提示。该图应该有三个图例,因为我们有三个系列“低”、“高”、“多”。
Please click on this image link to understand my requirement
最佳答案
您可以使用注释 将文本放在图表上的点旁边
注释是使用数据列添加的,直接跟在它应该代表的系列列之后
请参阅以下工作片段...
google.charts.load('current', {
callback: function () {
drawVisualization();
window.addEventListener('resize', drawVisualization, false);
},
packages:['corechart']
});
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'x');
data.addColumn('number', 'y');
data.addColumn({type: 'string', role: 'annotation'});
data.addRow([{v: 2, f: ''}, 0.8, '0.8x']);
data.addRow([{v: 2, f: ''}, 7.4, '7.4x']);
data.addRow([{v: 2, f: ''}, 12.2, '12.2x']);
var container = document.getElementById('visualization');
var chart = new google.visualization.ScatterChart(container);
chart.draw(data, {
hAxis: {
ticks: [
{v: 0, f: ''},
{v: 1, f: ''},
{v: 2, f: ''},
{v: 3, f: ''},
{v: 4, f: ''}
]
}
});
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="visualization"></div>
默认情况下,注释位于点上方,如上面的代码片段所示
并且没有可用于向左或向右移动注释的标准选项
仅向上或向下使用 --> annotations.stem.length
为了将文本设置到点的右边,
文本需要手动移动,
当 'ready'
事件在图表上触发时
请参阅以下工作片段...
注释 将作为 text
元素添加到 svg 中
当 ready 事件触发时,注释 text
元素被找到,
并且 'x'
属性被更改,将 text
移动到右边
annotations.stem.length
用于将文本降低到与点相同的高度
google.charts.load('current', {
callback: function () {
drawVisualization();
window.addEventListener('resize', drawVisualization, false);
},
packages:['corechart']
});
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'x');
data.addColumn('number', 'y');
data.addColumn({type: 'string', role: 'annotation'});
data.addRow([{v: 2, f: ''}, 0.8, '0.8x']);
data.addRow([{v: 2, f: ''}, 7.4, '7.4x']);
data.addRow([{v: 2, f: ''}, 12.2, '12.2x']);
var container = document.getElementById('visualization');
var chart = new google.visualization.ScatterChart(container);
google.visualization.events.addOneTimeListener(chart, 'ready', function () {
Array.prototype.forEach.call(container.getElementsByTagName('text'), function (text, index) {
if (text.getAttribute('text-anchor') === 'middle') {
text.setAttribute('x', parseFloat(text.getAttribute('x')) + 20);
}
});
});
chart.draw(data, {
annotations: {
stem: {
length: -5
}
},
hAxis: {
ticks: [
{v: 0, f: ''},
{v: 1, f: ''},
{v: 2, f: ''},
{v: 3, f: ''},
{v: 4, f: ''}
]
}
});
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="visualization"></div>
但是,您会在上面的代码片段中注意到,
当您将鼠标悬停在其中一个点上时,
图表会将文本设置回原始 'x'
位置
这可以通过使用以下选项关闭交互来防止...
enableInteractivity: false
但是如果你想保持交互性,
每当事件发生时,您都需要重置 'x'
位置
这可以通过使用 MutationObserver
来完成
请参阅以下工作片段...
当 'ready'
事件触发时,将为每个 text
元素计算新的 'x'
位置
然后MutationObserver
用于重置位置,
任何时候发生交互...
google.charts.load('current', {
callback: function () {
drawVisualization();
window.addEventListener('resize', drawVisualization, false);
},
packages:['corechart']
});
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'x');
data.addColumn('number', 'y');
data.addColumn({type: 'string', role: 'annotation'});
data.addRow([{v: 2, f: ''}, 0.8, '0.8x']);
data.addRow([{v: 2, f: ''}, 7.4, '7.4x']);
data.addRow([{v: 2, f: ''}, 12.2, '12.2x']);
var container = document.getElementById('visualization');
var chart = new google.visualization.ScatterChart(container);
var annotations = {};
google.visualization.events.addOneTimeListener(chart, 'ready', function () {
Array.prototype.forEach.call(container.getElementsByTagName('text'), function (text, index) {
if (text.getAttribute('text-anchor') === 'middle') {
annotations[index] = parseFloat(text.getAttribute('x')) + 20;
}
});
var observer = new MutationObserver(function () {
Array.prototype.forEach.call(container.getElementsByTagName('text'), function (text, index) {
if (text.getAttribute('text-anchor') === 'middle') {
text.setAttribute('x', annotations[index]);
}
});
});
observer.observe(container, {
childList: true,
subtree: true
});
});
chart.draw(data, {
annotations: {
stem: {
length: -5
}
},
hAxis: {
ticks: [
{v: 0, f: ''},
{v: 1, f: ''},
{v: 2, f: ''},
{v: 3, f: ''},
{v: 4, f: ''}
]
}
});
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="visualization"></div>
关于javascript - Google图表,我想在图表中每个点的右侧写一些文字,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41397582/