我正在学习使用Google Charts而我正在尝试在我的气泡图中添加垂直和水平线(请参阅fiddle上的图表)。
<div id="series_bubble_div" style="width: 1300px; height: 600px;"></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawSeriesChart);
function drawSeriesChart() {
var data = google.visualization.arrayToDataTable([
['May', 'Profit', 'Loss', 'Color', 'Amount'],
['One', -0.0200677317826359, 0.00783908666680255, "Blue", 2.90062193473149],
['Two', -0.000769939209045673, -0.000869129717442352, "Red", 0.393370989830078],
['Three', 0.231046771318721, -0.023, "Blue", 4.22746171],
['Four', -0.11516787308815, 0.0307, "Red", 1.58054636957],
['Five', -0.156171745810591, 0.002, "Blue", 4.478502636],
['Six', -0.0539915684061078, 0.0117, "Red", 1.396314864],
['Seven', -0.00718037723705341, -0.011, "Blue", 1.31638390999998],
['Eight', -0.0562574430733049, 0.0411, "Red", 8.39198070530399],
['Nine', 0.235522678055354, -0.005, "Blue", 8.70835673000001],
['Ten', 0.226171773714415, -0.0164, "Red", 5.66191157875001],
['Eleven', -0.0805926930562123, -0.00600000000000001, "Blue", 4.74257550999999],
['Twelve', 0.0642371105755089, 0.0675, "Red", 0.630424760336]
]);
var options = {
title: 'My graph, May 2017',
hAxis: {title: 'Profit',format: 'percent', minValue: -0.05, maxValue: 0.10 },
vAxis: {title: 'Loss',format: 'percent', minValue: -0.03, maxValue: 0.06 },
bubble: { textStyle: { fontSize: 11 } },
axisTitlesPosition: 'out'
};
var chart = new google.visualization.BubbleChart(document.getElementById('series_bubble_div'));
chart.draw(data, options);
}
</script>
下图是我想要达到的效果。水平线应为+ 1.5%和-1.5%,垂直线应为+ 7%和-7%。线条之间的区域应该具有与图表区域其余部分不同的颜色。
你有任何想法,如何达到它?