Googleバブルチャートに行を追加する

私はGoogle Chartsを使用することを学んでおり、バブルチャートに垂直線と水平線を追加しようとしています（fiddleのグラフを参照）。Googleバブルチャートに行を追加する

<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％でなければなりません。線の間の領域は、チャート領域の残りの部分とは別の色にする必要があります。

あなたはそれに到達する方法はありますか？私はあなたがバブルチャート自体にライン/カラーセグメントを追加することができるとは思わないが、あなたは偽物でし

出典

2017-11-29 Rookie

折れ線グラフでバブルチャートを重ねることによって、このような効果（次の2つを必要とするだろう - 1つは縦線用、もう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>

出典

2017-11-29 16:32:35 Kristaps

あなたはスタイルや注釈を散布図にバブルチャートを変換する場合は少し偽造やオーバーレイを行い、その後、ラインを描画するためのシリーズを追加することができます（との間にヌルでラインを別々のセグメントに分割する）。緑の領域は偽造するのが最も難しいかもしれませんが、領域の周りの線分を閉じるだけで、「領域」シリーズでポリゴンを描くことができます。 – dlaliberte

@dlaliberte各点の系列を作らずに散布図で個々の点のサイズを設定できますか？ – Kristaps

はい、それぞれのスキャッタポイントのポイントサイズと色を設定するには、「スタイル」ロールを使用できます。 – dlaliberte

Googleバブルチャートに行を追加する

答えて

関連する問題