Google 버블 차트에 줄을 추가하십시오.

Question

Google 차트를 사용하는 방법을 배우고 있으며 버블 차트에 수직선과 수평선을 추가하려고합니다 (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 %이어야합니다. 선들 사이의 영역은 나머지 차트 영역보다 다른 색을 가져야합니다.

연락 방법은 궁금하십니까?

Answer 1

나는 당신이 버블 차트 자체에 라인/컬러 세그먼트를 추가 할 수 있다고 생각하지만, 그럴 수 가짜 (당신이 필요 했어 라인 차트 버블 차트를 중첩하여이 같은 효과가 없습니다 - 하나는 수직선, 다른 하나는 수평선), 중간을 채울 영역 도표. 차트가 작성되면 차트를 작성하여 올바른 위치에 놓아야합니다.

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); 
 

 
     var chartH = new google.visualization.ChartWrapper({ 
 
      chartType: 'LineChart', 
 
      containerId: 'line_h_div', 
 
      dataTable: [ 
 
       ['x', '1', '2'], 
 
       [0, 20, 40], 
 
       [100, 20, 40] 
 
      ], 
 
      options: { 
 
       hAxis: { 
 
        minValue: 0, 
 
        maxValue: 100, 
 
        textPosition: 'none', 
 
        gridlines: { 
 
         color: 'none' 
 
        }, 
 
        baselineColor: 'none' 
 
       }, 
 
       vAxis: { 
 
        minValue: 0, 
 
        maxValue: 100, 
 
        textPosition: 'none', 
 
        gridlines: { 
 
         color: 'none' 
 
        }, 
 
        baselineColor: 'none' 
 
       }, 
 
       colors: ['green'], 
 
       pointSize: 0, 
 
       lineWidth: 2, 
 
       enableInteractivity: false, 
 
       legend: { 
 
        position: 'none' 
 
       }, 
 
       backgroundColor: 'transparent' 
 
      } 
 
     }); 
 
     chartH.draw(); 
 

 
     var chartV = new google.visualization.ChartWrapper({ 
 
      chartType: 'LineChart', 
 
      containerId: 'line_v_div', 
 
      dataTable: [ 
 
       ['x', '1', '2'], 
 
       [0, 20, 40], 
 
       [100, 20, 40] 
 
      ], 
 
      options: { 
 
       hAxis: { 
 
        minValue: 0, 
 
        maxValue: 100, 
 
        textPosition: 'none', 
 
        gridlines: { 
 
         color: 'none' 
 
        }, 
 
        baselineColor: 'none' 
 
       }, 
 
       vAxis: { 
 
        minValue: 0, 
 
        maxValue: 100, 
 
        textPosition: 'none', 
 
        gridlines: { 
 
         color: 'none' 
 
        }, 
 
        baselineColor: 'none' 
 
       }, 
 
       colors: ['green'], 
 
       pointSize: 0, 
 
       lineWidth: 2, 
 
       enableInteractivity: false, 
 
       legend: { 
 
        position: 'none' 
 
       }, 
 
       backgroundColor: 'transparent', 
 
       orientation: 'vertical' 
 
      } 
 
     }); 
 
     chartV.draw(); 
 

 
     var chartArea = new google.visualization.ChartWrapper({ 
 
      chartType: 'AreaChart', 
 
      containerId: 'area_div', 
 
      dataTable: [ 
 
       ['x', '1', '2'], 
 
       [0, 20, 0], 
 
       [20, 20, 0], 
 
       [20, 20, 20], 
 
       [40, 20, 20], 
 
       [40, 20, 0], 
 
       [100, 20, 0] 
 
      ], 
 
      options: { 
 
       hAxis: { 
 
        minValue: 0, 
 
        maxValue: 100, 
 
        textPosition: 'none', 
 
        gridlines: { 
 
         color: 'none' 
 
        }, 
 
        baselineColor: 'none' 
 
       }, 
 
       vAxis: { 
 
        minValue: 0, 
 
        maxValue: 100, 
 
        textPosition: 'none', 
 
        gridlines: { 
 
         color: 'none' 
 
        }, 
 
        baselineColor: 'none' 
 
       }, 
 
       colors: ['none', 'green'], 
 
       pointSize: 0, 
 
       lineWidth: 1, 
 
       enableInteractivity: false, 
 
       legend: { 
 
        position: 'none' 
 
       }, 
 
       backgroundColor: 'transparent', 
 
       isStacked: true 
 
      } 
 
     }); 
 
     chartArea.draw(); 
 
    }

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="series_bubble_div" style="width: 1300px; height: 600px;"></div> 
 
<div id="line_v_div" style="width: 1300px; height: 600px; position: absolute; top:8px"></div> 
 
<div id="line_h_div" style="width: 1300px; height: 600px; position: absolute; top:0"></div> 
 
<div id="area_div" style="width: 1300px; height: 600px; position: absolute; top:0"></div>

편집 @dlaliberte에 의해 제안

- 당신이 실제로 산포도에 모든 일을 변환하고 플롯 오버레이 할 필요없이 원하는 결과를 표시 할 수 있습니다.

google.charts.load('current', { 
 
    'packages': ['corechart'] 
 
}); 
 
google.charts.setOnLoadCallback(drawSeriesChart); 
 

 
function drawSeriesChart() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('number', 'Profit'); 
 
    data.addColumn('number', 'line'); 
 
    data.addColumn('number', 'area'); 
 
    data.addColumn('number', 'Loss'); 
 
    data.addColumn({ 
 
     type: 'string', 
 
     role: 'style' 
 
    }); 
 
    data.addColumn({ 
 
     type: 'string', 
 
     role: 'annotation' 
 
    }); 
 
    data.addRows([ 
 
     [-0.0200677317826359, null, null, 0.00783908666680255, "color: blue; stroke-width: " + 2.90062193473149 * 10, 'One'], 
 
     [-0.000769939209045673, null, null, -0.000869129717442352, "color: red; stroke-width: " + 0.393370989830078 * 10, 'Two'], 
 
     [0.231046771318721, null, null, -0.023, "color: blue; stroke-width: " + 4.22746171 * 10, 'Three'], 
 
     [-0.11516787308815, null, null, 0.0307, "color: red; stroke-width: " + 1.58054636957 * 10, 'Four'], 
 
     [-0.156171745810591, null, null, 0.002, "color: blue; stroke-width: " + 4.478502636 * 10, 'Five'], 
 
     [-0.0539915684061078, null, null, 0.0117, "color: red; stroke-width: " + 1.396314864 * 10, 'Six'], 
 
     [-0.00718037723705341, null, null, -0.011, "color: blue; stroke-width: " + 1.31638390999998 * 10, 'Seven'], 
 
     [-0.0562574430733049, null, null, 0.0411, "color: red; stroke-width: " + 8.39198070530399 * 10, 'Eight'], 
 
     [0.235522678055354, null, null, -0.005, "color: blue; stroke-width: " + 8.70835673000001 * 10, 'Nine'], 
 
     [0.226171773714415, null, null, -0.0164, "color: red; stroke-width: " + 5.66191157875001 * 10, 'Ten'], 
 
     [-0.0805926930562123, null, null, -0.00600000000000001, "color: blue; stroke-width: " + 4.74257550999999 * 10, 'Eleven'], 
 
     [0.0642371105755089, null, null, 0.0675, "color: red; stroke-width: " + 0.630424760336 * 10, 'Twelve'], 
 
     [-0.3, 0.015, null, null, null, null], 
 
     [0.3, 0.015, null, null, null, null], 
 
     [null, null, null, null, null, null], 
 
     [-0.3, -0.015, null, null, null, null], 
 
     [0.3, -0.015, null, null, null, null], 
 
     [null, null, null, null, null, null], 
 
     [-0.07, 0.09, null, null, null, null], 
 
     [-0.07, -0.03, null, null, null, null], 
 
     [null, null, null, null, null, null], 
 
     [0.07, 0.09, null, null, null, null], 
 
     [0.07, -0.03, null, null, null, null], 
 
     [null, null, null, null, null, null], 
 
     [-0.07, null, 0.015, null, null, null], 
 
     [0.07, null, 0.015, null, null, null], 
 
     [null, null, null, null, null, null], 
 
     [-0.07, null, -0.015, null, null, null], 
 
     [0.07, null, -0.015, null, null, null], 
 
    ]); 
 

 
    var options = { 
 
     title: 'My graph, May 2017', 
 
     hAxis: { 
 
      title: 'Profit', 
 
      format: 'percent', 
 
      viewWindowMode: 'explicit', 
 
      viewWindow: { 
 
       max: -0.3, 
 
       min: 0.3 
 
      } 
 
     }, 
 
     vAxis: { 
 
      title: 'Loss', 
 
      format: 'percent', 
 
      viewWindowMode: 'explicit', 
 
      viewWindow: { 
 
       max: 0.09, 
 
       min: -0.03 
 
      } 
 
     }, 
 
     bubble: { 
 
      textStyle: { 
 
       fontSize: 11 
 
      } 
 
     }, 
 
     series: { 
 
      0: { 
 
       lineWidth: 2, 
 
       pointSize: 0, 
 
       color: 'green' 
 
      }, 
 
      1: { 
 
       type: 'area', 
 
       pointSize: 0, 
 
       color: 'green' 
 
      } 
 
     }, 
 
     axisTitlesPosition: 'out', 
 
     legend: 'none' 
 
    }; 
 

 
    var chart = new google.visualization.ScatterChart(document.getElementById('series_bubble_div')); 
 

 
    chart.draw(data, options); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="series_bubble_div" style="width: 1300px; height: 600px;"></div>