谷歌圖表：如何把3個或更多不同的數據集和曲線在同一圖表中

Question

漂亮，請我希望你能幫助我解決這個煩惱：

我需要做一個圖有3點不同的曲線（數據集），我嘗試了加入和它的2臺工作正常，但第三個我還沒有找到把它的方式。 這裏的3臺樣品

Set 1 
Pressure | Liquid Flowrate 
0  |  50 
100  |  300 
200  |  400 

Set 2 
Pressure | Liquid Flowrate 
    10  |  20 
    150  |  50 
    500  |  600 

Set 3 
Pressure | Liquid Flowrate 
    55  | 320 
    125  | 418 
    250  |  25 

我需要3條曲線在它們之間進行比較（實際上我需要比較曲線行爲而不是數值），但是由於'X'（和（'Y'）值都不同，所以我不能將數據放入到相同的DataTable。

如果您需要任何額外的信息，只是讓我知道...

謝謝你提前很...

PD：這裏有我有3個數據集的代碼的代碼而加入，如果你能找到它有用

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
 

 
<div id="chart_div"></div> 
 

 
<script type="text/javascript"> 
 
    google.charts.load('current', {packages: ['corechart', 'line']}); 
 
    google.charts.setOnLoadCallback(drawBackgroundColor); 
 

 
    function drawBackgroundColor() { 
 
     // inflow 
 
     var inflowData = new google.visualization.arrayToDataTable( [["'X'","'Inflow'",{"type":"string","role":"style"},{"type":"string","role":"annotation"}],[2936.02073,40.627573,null,null],[8.188287,3999.44566,null,null],[619.600726,3180.31993,"point { size: 10; shape-type: star; shape-sides: 4; fill-color: #000000; }","Punto de Operaci\u00f3n"],[1772.00372,1631.97183,null,null],[2351.72511,845.266412,null,null],[1195.53362,2407.62767,null,null],[313.814365,3590.16482,null,null],[2643.29146,446.480989,null,null],[907.503204,2794.22577,null,null],[160.957181,3794.94905,null,null],[2061.33892,1240.15161,null,null],[1483.74271,2020.31124,null,null],[466.690146,3385.28951,null,null],[2789.50773,245.261982,null,null],[84.540385,3897.29027,null,null],[763.53822,2987.32624,null,null],[2497.47208,646.244959,null,null],[1051.49988,2601.00048,null,null],[237.386183,3692.5695,null,null],[2206.31079,1043.25088,null,null]] ); 
 
     // flowrate 
 
     var flowrateData = new google.visualization.arrayToDataTable( [["'X'","'Outflow'",{"type":"string","role":"style"},{"type":"string","role":"annotation"}],[0,0,null,null],[3.145,2415.8804,null,null],[101.777916,2415.88204,null,null],[249.72729,2415.70168,null,null],[397.676665,2415.00924,null,null],[486.446289,2671.73524,null,null],[539.708064,2889.48375,null,null],[619.600726,3180.31993,null,null],[684.250947,3406.13551,null,null],[781.226279,3625.58774,null,null],[1023.66461,3625.08804,null,null],[1266.10294,3624.67156,null,null],[1411.56594,3624.47626,null,null],[1629.76044,3624.24869,null,null],[1872.19877,3624.01581,null,null],[2017.66176,3623.90403,null,null],[2235.85626,3623.75916,null,null],[2381.31926,3623.67574,null,null],[2599.51376,3623.56538,null,null],[2817.70825,3623.47235,null,null],[3145,3623.35124,null,null]] ) 
 
     // vogel 
 
     var voguelData = new google.visualization.arrayToDataTable( [["'X'","'Vogel'",{"type":"string","role":"style"},{"type":"string","role":"annotation"}],[0,4000,null,null],[210.526316,3789.473684,null,null],[421.052632,3578.947368,null,null],[631.578947,3368.421053,null,null],[842.105263,3157.894737,null,null],[1052.631579,2947.368421,null,null],[1263.157895,2736.842105,null,null],[1473.684211,2526.315789,null,null],[1684.210526,2315.789474,null,null],[1894.736842,2105.263158,null,null],[2105.263158,1894.736842,null,null],[2315.789474,1684.210526,null,null],[2526.315789,1473.684211,null,null],[2736.842105,1263.157895,null,null],[2201.318595,1052.631579,null,null],[2339.204645,842.105263,null,null],[2450.332942,631.578947,null,null],[2534.703484,421.052632,null,null],[2592.316273,210.526316,null,null],[2623.171308,0,null,null]] ) 
 
     // operation 
 
     // [[619.600726,3180.31993]] 
 
     // 
 
     // 
 
     // 
 
     // 
 
     var joinedData = google.visualization.data.join(inflowData, flowrateData, 'full', [[0, 0]], [1,2,3], [1,2,3]); 
 
     
 
     // I join inflow and flowrate and it kinda works, but I need the vogel too and I can't find a way to put it in. I tried the next join (commented) but it ends in a disaster. 
 
     
 
     //var fullData = google.visualization.data.join(joinedData, voguelData, 'full', [[0, 0]], [1,2], [1,2]); 
 
     // 
 
     var fullData = joinedData; 
 
     
 
// 
 
// 
 
     var options1 = { 
 
      interpolateNulls: true, 
 
      title: 'Nodal Analysis - Well: 1330', 
 
      hAxis: { 
 
       title: 'Liquid Flowrate (STBL/D)' 
 
      }, 
 
      vAxis: { 
 
       title: 'Pressure (PSIA)', 
 
      }, 
 
      pointSize: 3 
 
     }; 
 

 
     var chart1 = new google.visualization.LineChart(document.getElementById('chart_div')); 
 
     chart1.draw(fullData, options1); 
 

 
    } 
 
</script>

Answer 1

你在正確的軌道上

第二個連接需要包括所有列從第一個加入

var fullData = google.visualization.data.join(
    joinedData, 
    voguelData, 
    'full', 

    // join columns 
    [[0, 0]], 

    // include columns from first table 
    [1,2,3,4,5,6], 

    // include columns from second table 
    [1,2,3] 
); 

看到下面的工作片段...

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

 
function drawBackgroundColor() { 
 
    // inflow 
 
    var inflowData = new google.visualization.arrayToDataTable( [["'X'","'Inflow'",{"type":"string","role":"style"},{"type":"string","role":"annotation"}],[2936.02073,40.627573,null,null],[8.188287,3999.44566,null,null],[619.600726,3180.31993,"point { size: 10; shape-type: star; shape-sides: 4; fill-color: #000000; }","Punto de Operaci\u00f3n"],[1772.00372,1631.97183,null,null],[2351.72511,845.266412,null,null],[1195.53362,2407.62767,null,null],[313.814365,3590.16482,null,null],[2643.29146,446.480989,null,null],[907.503204,2794.22577,null,null],[160.957181,3794.94905,null,null],[2061.33892,1240.15161,null,null],[1483.74271,2020.31124,null,null],[466.690146,3385.28951,null,null],[2789.50773,245.261982,null,null],[84.540385,3897.29027,null,null],[763.53822,2987.32624,null,null],[2497.47208,646.244959,null,null],[1051.49988,2601.00048,null,null],[237.386183,3692.5695,null,null],[2206.31079,1043.25088,null,null]] ); 
 
    // flowrate 
 
    var flowrateData = new google.visualization.arrayToDataTable( [["'X'","'Outflow'",{"type":"string","role":"style"},{"type":"string","role":"annotation"}],[0,0,null,null],[3.145,2415.8804,null,null],[101.777916,2415.88204,null,null],[249.72729,2415.70168,null,null],[397.676665,2415.00924,null,null],[486.446289,2671.73524,null,null],[539.708064,2889.48375,null,null],[619.600726,3180.31993,null,null],[684.250947,3406.13551,null,null],[781.226279,3625.58774,null,null],[1023.66461,3625.08804,null,null],[1266.10294,3624.67156,null,null],[1411.56594,3624.47626,null,null],[1629.76044,3624.24869,null,null],[1872.19877,3624.01581,null,null],[2017.66176,3623.90403,null,null],[2235.85626,3623.75916,null,null],[2381.31926,3623.67574,null,null],[2599.51376,3623.56538,null,null],[2817.70825,3623.47235,null,null],[3145,3623.35124,null,null]] ) 
 
    // vogel 
 
    var voguelData = new google.visualization.arrayToDataTable( [["'X'","'Vogel'",{"type":"string","role":"style"},{"type":"string","role":"annotation"}],[0,4000,null,null],[210.526316,3789.473684,null,null],[421.052632,3578.947368,null,null],[631.578947,3368.421053,null,null],[842.105263,3157.894737,null,null],[1052.631579,2947.368421,null,null],[1263.157895,2736.842105,null,null],[1473.684211,2526.315789,null,null],[1684.210526,2315.789474,null,null],[1894.736842,2105.263158,null,null],[2105.263158,1894.736842,null,null],[2315.789474,1684.210526,null,null],[2526.315789,1473.684211,null,null],[2736.842105,1263.157895,null,null],[2201.318595,1052.631579,null,null],[2339.204645,842.105263,null,null],[2450.332942,631.578947,null,null],[2534.703484,421.052632,null,null],[2592.316273,210.526316,null,null],[2623.171308,0,null,null]] ) 
 

 
    var joinedData = google.visualization.data.join(inflowData, flowrateData, 'full', [[0, 0]], [1,2,3], [1,2,3]); 
 

 
    var fullData = google.visualization.data.join(joinedData, voguelData, 'full', [[0, 0]], [1,2,3,4,5,6], [1,2,3]); 
 

 
    var options1 = { 
 
     interpolateNulls: true, 
 
     title: 'Nodal Analysis - Well: 1330', 
 
     hAxis: { 
 
      title: 'Liquid Flowrate (STBL/D)' 
 
     }, 
 
     vAxis: { 
 
      title: 'Pressure (PSIA)', 
 
     }, 
 
     pointSize: 3 
 
    }; 
 

 
    var chart1 = new google.visualization.LineChart(document.getElementById('chart_div')); 
 
    chart1.draw(fullData, options1); 
 
}

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