在谷歌图表(象限图)上书写文本

Question

我想用Google Charts API创建一个象限图，但我无法将文本插入到我创建的4个相应象限中。我当前的代码如下

function drawScatterManager() {
var data = google.visualization.arrayToDataTable([
['Actual', 'Communication', 'Leading', 'Managing Relationships', 'Controlling', 'Planning', 'Problem Solving', 'Managing Self'],
[1, 2, null, null, null, null, null, null],
[2, null, 2, null, null, null, null, null],
[2, null, null, 4, null, null, null, null],
[1, null, null, null, 5, null, null, null],
[4, null, null, null, null, 2, null, null],
[5, null, null, null, null, null, 1, null],
[4, null, null, null, null, null, null, 4]
]);
var options = {
title: 'Self vs. Manager comparison (N = 1)',
hAxis: { title: 'Self', minValue: 0, maxValue: 5 },
vAxis: { title: 'Manager', minValue: 0, maxValue: 5 },
colors: ['#4f81bd', '#318687', "#c0514d", '#f79646', '#76933c', "#4bacc6", "#8064a0"],
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div1'));
chart.draw(data, options);
drawVAxisLine(chart, 3.5);
drawXAxisLine(chart, 3.5);
}

drawVAxis和drawXAxis绘制了划分四个象限的水平线和垂直线。图表看起来像这里的图片，但我希望它看起来像这里。感谢您的帮助。

Answer 1

您可以使用注释列角色来绘制象限标签。

在数据表的末尾添加两列
第一个将用于标签的y轴放置
第二个将是标签本身。

注意：您可以使用组合图来绘制垂直&水平线
但如果选择手动绘制，请确保等待图表的'ready'事件，否则调用draw-AxisLine函数时图表可能不可用。。。

我们将使用以下选项来防止行和注释系列对用户做出响应。。。

series: {
7: {
color: '#333333',
enableInteractivity: false,
type: 'line'
},
8: {
color: '#333333',
enableInteractivity: false,
type: 'line'
},
9: {
annotations: {
stem: {
length: 0
},
textStyle: {
color: 'black'
}
},
color: 'transparent',
enableInteractivity: false
}
}

请参阅以下工作片段。。。

google.charts.load('current', {
packages: ['corechart']
}).then(function() {
var data = google.visualization.arrayToDataTable([
['Actual', 'Communication', 'Leading', 'Managing Relationships', 'Controlling', 'Planning', 'Problem Solving', 'Managing Self', 'horizontal line', 'vertical line', 'label placement', {type: 'string', role: 'annotation'}],
[0, null, null, null, null, null, null, null, 3.5, null, null, null],
[1, 2, null, null, null, null, null, null, 3.5, null, null, null],
[1.5, null, null, null, null, null, null, null, null, null, 1.5, 'Quadrant 2'],
[1.5, null, null, null, null, null, null, null, null, null, 4.5, 'Quadrant 1'],
[2, null, 2, null, null, null, null, null, 3.5, null, null, null],
[2, null, null, 4, null, null, null, null, 3.5, null, null, null],
[1, null, null, null, 5, null, null, null, 3.5, null, null, null],
[4, null, null, null, null, 2, null, null, 3.5, null, null, null],
[5, null, null, null, null, null, 1, null, 3.5, null, null, null],
[4, null, null, null, null, null, null, 4, null, null, null, null],
[4.5, null, null, null, null, null, null, null, null, null, 1.5, 'Quadrant 4'],
[4.5, null, null, null, null, null, null, null, null, null, 4.5, 'Quadrant 3'],
[3.5, null, null, null, null, null, null, null, null, 0, null, null],
[3.5, null, null, null, null, null, null, null, null, 5, null, null]
]);
var options = {
title: 'Self vs. Manager comparison (N = 1)',
hAxis: { title: 'Self', minValue: 0, maxValue: 5 },
vAxis: { title: 'Manager', minValue: 0, maxValue: 5 },
colors: ['#4f81bd', '#318687', "#c0514d", '#f79646', '#76933c', "#4bacc6", "#8064a0"],
seriesType: 'scatter',
series: {
7: {
color: '#333333',
enableInteractivity: false,
type: 'line'
},
8: {
color: '#333333',
enableInteractivity: false,
type: 'line'
},
9: {
annotations: {
stem: {
length: 0
},
textStyle: {
color: 'black'
}
},
color: 'transparent',
enableInteractivity: false
}
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div1'));
chart.draw(data, options);
window.addEventListener('resize', function () {
chart.draw(data, options);
});
});

html, body {
height: 100%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#chart_div1 {
min-height: 400px;
height: 100%;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div1"></div>