在Google Bubble Chart中添加行

时间:2017-11-29 15:14:34

标签: charts google-visualization bubble-chart

我正在学习使用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%。线条之间的区域应该具有与图表区域其余部分不同的颜色。

你有任何想法,如何达到它?

Desired result of bubble chart with lines

0 个答案:

没有答案