charts - 谷歌图表 : How to put 3 or more different DataSets as curves in the same chart

Question

非常好，我希望你能帮我解决这个问题:

我需要制作一个包含 3 条不同曲线(数据集)的图表，我尝试了 Join 并且它适用于 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中。

如果您需要任何额外信息，请告诉我...

非常感谢您...

P.D.:这是我拥有的 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>