javascript - 使用 data.join 方法的 5 列 Google 图表

Question

我正在尝试使用谷歌图表将两个图表组合成一个图表。但是我有 5列值如下。最终图表将包含4个折线图。但现在它只包含2个。

对于数据1 App1和Seloger1的折线图

对于数据2 App2和Seloger2折线图

最终图表将包含 App1、App2 和 Seloger1 和 seloger 2 的 4 个折线图

Answer 1

需要包含每一列的索引，
从每个数据表中，
应该包含在连接中

var joinedData = google.visualization.data.join(
  data,          // data table 1
  data2,         // data table 2
  'full',        // join type
  [[0,0]],       // join columns
  [1, 2, 3, 4],  // include columns from data table 1
  [1, 2, 3, 4]   // include columns from data table 2
);

请参阅以下工作片段...

var commonOptions = {
  titlePosition: "none",
  height: 350,
  width: 1024,
  pointShape: "circle",
  crosshair: {
    trigger: "both",
    color: "#A9A9A9"
  },

  chartArea: {
    top: 25,
    left: 70,
    width: "80%",
  },

  backgroundColor: {
    strokeWidth: 3,
    fill: "#F9F9F9"
  },
  legend: {
    position: "right"
  },
  hAxis: {
    slantedText: true,
    slantedTextAngle: 90,
  },
  tooltip: {
    isHtml: true
  },
  vAxis: {
    gridlines: {
      count: -1,
      color: "#000000"
    },
    minorGridlines: {
      count: 1
    }
  }
};

var xAxisView = [{data: [["1:24:22", 0, "Uptime: 1:24:22<br/>App Count: 0", 0, "Uptime: 1:24:22<br/>Zombie Count: 0 "],["1:24:42", 0, "Uptime: 1:24:42<br/>App Count: 0", 0, "Uptime: 1:24:42<br/>Zombie Count: 0 "],["1:25:03", 0, "Uptime: 1:25:03<br/>App Count: 0", 0, "Uptime: 1:25:03<br/>Zombie Count: 0 "],["1:25:23", 0, "Uptime: 1:25:23<br/>App Count: 0", 0, "Uptime: 1:25:23<br/>Zombie Count: 0 "],["1:25:43", 0, "Uptime: 1:25:43<br/>App Count: 0", 0, "Uptime: 1:25:43<br/>Zombie Count: 0 "],["1:26:03", 0, "Uptime: 1:26:03<br/>App Count: 0", 0, "Uptime: 1:26:03<br/>Zombie Count: 0 "],["1:26:23", 0, "Uptime: 1:26:23<br/>App Count: 0", 0, "Uptime: 1:26:23<br/>Zombie Count: 0 "],["1:26:43", 51, "Uptime: 1:26:43<br/>App Count: 51", 0, "Uptime: 1:26:43<br/>Zombie Count: 0 "],["1:27:03", 77, "Uptime: 1:27:03<br/>App Count: 77", 23, "Uptime: 1:27:03<br/>Zombie Count: 23 (braiiiins!)"],["1:27:23", 80, "Uptime: 1:27:23<br/>App Count: 80", 25, "Uptime: 1:27:23<br/>Zombie Count: 25 (braiiiins!)"],["1:27:43", 82, "Uptime: 1:27:43<br/>App Count: 82", 27, "Uptime: 1:27:43<br/>Zombie Count: 27 (braiiiins!)"],["1:28:03", 80, "Uptime: 1:28:03<br/>App Count: 80", 27, "Uptime: 1:28:03<br/>Zombie Count: 27 (braiiiins!)"],["1:28:23", 80, "Uptime: 1:28:23<br/>App Count: 80", 26, "Uptime: 1:28:23<br/>Zombie Count: 26 (braiiiins!)"],["1:28:43", 78, "Uptime: 1:28:43<br/>App Count: 78", 24, "Uptime: 1:28:43<br/>Zombie Count: 24 (braiiiins!)"],["1:29:03", 82, "Uptime: 1:29:03<br/>App Count: 82", 27, "Uptime: 1:29:03<br/>Zombie Count: 27 (braiiiins!)"],["1:29:23", 80, "Uptime: 1:29:23<br/>App Count: 80", 30, "Uptime: 1:29:23<br/>Zombie Count: 30 (braiiiins!)"],["1:29:43", 78, "Uptime: 1:29:43<br/>App Count: 78", 24, "Uptime: 1:29:43<br/>Zombie Count: 24 (braiiiins!)"],["1:30:03", 83, "Uptime: 1:30:03<br/>App Count: 83", 28, "Uptime: 1:30:03<br/>Zombie Count: 28 (braiiiins!)"],["1:30:23", 81, "Uptime: 1:30:23<br/>App Count: 81", 27, "Uptime: 1:30:23<br/>Zombie Count: 27 (braiiiins!)"],["1:30:43", 77, "Uptime: 1:30:43<br/>App Count: 77", 25, "Uptime: 1:30:43<br/>Zombie Count: 25 (braiiiins!)"],["1:31:03", 77, "Uptime: 1:31:03<br/>App Count: 77", 28, "Uptime: 1:31:03<br/>Zombie Count: 28 (braiiiins!)"],["1:31:23", 82, "Uptime: 1:31:23<br/>App Count: 82", 29, "Uptime: 1:31:23<br/>Zombie Count: 29 (braiiiins!)"],["1:31:43", 35, "Uptime: 1:31:43<br/>App Count: 35", 24, "Uptime: 1:31:43<br/>Zombie Count: 24 (braiiiins!)"],["1:32:03", 0, "Uptime: 1:32:03<br/>App Count: 0", 0, "Uptime: 1:32:03<br/>Zombie Count: 0 "],["1:32:23", 0, "Uptime: 1:32:23<br/>App Count: 0", 0, "Uptime: 1:32:23<br/>Zombie Count: 0 "],["1:32:43", 0, "Uptime: 1:32:43<br/>App Count: 0", 0, "Uptime: 1:32:43<br/>Zombie Count: 0 "],["1:33:03", 0, "Uptime: 1:33:03<br/>App Count: 0", 0, "Uptime: 1:33:03<br/>Zombie Count: 0 "],["1:33:23", 0, "Uptime: 1:33:23<br/>App Count: 0", 0, "Uptime: 1:33:23<br/>Zombie Count: 0 "],["1:33:43", 0, "Uptime: 1:33:43<br/>App Count: 0", 0, "Uptime: 1:33:43<br/>Zombie Count: 0 "],["1:34:03", 0, "Uptime: 1:34:03<br/>App Count: 0", 0, "Uptime: 1:34:03<br/>Zombie Count: 0 "],["1:34:23", 0, "Uptime: 1:34:23<br/>App Count: 0", 0, "Uptime: 1:34:23<br/>Zombie Count: 0 "],["1:34:43", 0, "Uptime: 1:34:43<br/>App Count: 0", 0, "Uptime: 1:34:43<br/>Zombie Count: 0 "],["1:35:03", 0, "Uptime: 1:35:03<br/>App Count: 0", 0, "Uptime: 1:35:03<br/>Zombie Count: 0 "],["1:35:23", 0, "Uptime: 1:35:23<br/>App Count: 0", 0, "Uptime: 1:35:23<br/>Zombie Count: 0 "],["1:35:43", 0, "Uptime: 1:35:43<br/>App Count: 0", 0, "Uptime: 1:35:43<br/>Zombie Count: 0 "],["1:36:03", 0, "Uptime: 1:36:03<br/>App Count: 0", 0, "Uptime: 1:36:03<br/>Zombie Count: 0 "]]}, {data: [["1:19:33", 0, "Uptime: 1:19:33<br/>App Count: 0", 0, "Uptime: 1:19:33<br/>Zombie Count: 0 "],["1:19:53", 0, "Uptime: 1:19:53<br/>App Count: 0", 0, "Uptime: 1:19:53<br/>Zombie Count: 0 "],["1:20:13", 0, "Uptime: 1:20:13<br/>App Count: 0", 0, "Uptime: 1:20:13<br/>Zombie Count: 0 "],["1:20:33", 0, "Uptime: 1:20:33<br/>App Count: 0", 0, "Uptime: 1:20:33<br/>Zombie Count: 0 "],["1:20:53", 0, "Uptime: 1:20:53<br/>App Count: 0", 0, "Uptime: 1:20:53<br/>Zombie Count: 0 "],["1:21:13", 19, "Uptime: 1:21:13<br/>App Count: 19", 0, "Uptime: 1:21:13<br/>Zombie Count: 0 "],["1:21:33", 49, "Uptime: 1:21:33<br/>App Count: 49", 30, "Uptime: 1:21:33<br/>Zombie Count: 30 (braiiiins!)"],["1:21:53", 51, "Uptime: 1:21:53<br/>App Count: 51", 30, "Uptime: 1:21:53<br/>Zombie Count: 30 (braiiiins!)"],["1:22:13", 49, "Uptime: 1:22:13<br/>App Count: 49", 28, "Uptime: 1:22:13<br/>Zombie Count: 28 (braiiiins!)"],["1:22:33", 53, "Uptime: 1:22:33<br/>App Count: 53", 29, "Uptime: 1:22:33<br/>Zombie Count: 29 (braiiiins!)"],["1:22:53", 49, "Uptime: 1:22:53<br/>App Count: 49", 29, "Uptime: 1:22:53<br/>Zombie Count: 29 (braiiiins!)"],["1:23:13", 52, "Uptime: 1:23:13<br/>App Count: 52", 31, "Uptime: 1:23:13<br/>Zombie Count: 31 (braiiiins!)"],["1:23:33", 53, "Uptime: 1:23:33<br/>App Count: 53", 29, "Uptime: 1:23:33<br/>Zombie Count: 29 (braiiiins!)"],["1:23:53", 51, "Uptime: 1:23:53<br/>App Count: 51", 30, "Uptime: 1:23:53<br/>Zombie Count: 30 (braiiiins!)"],["1:24:13", 49, "Uptime: 1:24:13<br/>App Count: 49", 29, "Uptime: 1:24:13<br/>Zombie Count: 29 (braiiiins!)"],["1:24:33", 48, "Uptime: 1:24:33<br/>App Count: 48", 27, "Uptime: 1:24:33<br/>Zombie Count: 27 (braiiiins!)"],["1:24:53", 53, "Uptime: 1:24:53<br/>App Count: 53", 31, "Uptime: 1:24:53<br/>Zombie Count: 31 (braiiiins!)"],["1:25:13", 52, "Uptime: 1:25:13<br/>App Count: 52", 31, "Uptime: 1:25:13<br/>Zombie Count: 31 (braiiiins!)"],["1:25:34", 52, "Uptime: 1:25:34<br/>App Count: 52", 28, "Uptime: 1:25:34<br/>Zombie Count: 28 (braiiiins!)"],["1:25:54", 51, "Uptime: 1:25:54<br/>App Count: 51", 28, "Uptime: 1:25:54<br/>Zombie Count: 28 (braiiiins!)"],["1:26:14", 35, "Uptime: 1:26:14<br/>App Count: 35", 30, "Uptime: 1:26:14<br/>Zombie Count: 30 (braiiiins!)"],["1:26:34", 0, "Uptime: 1:26:34<br/>App Count: 0", 0, "Uptime: 1:26:34<br/>Zombie Count: 0 "],["1:26:54", 0, "Uptime: 1:26:54<br/>App Count: 0", 0, "Uptime: 1:26:54<br/>Zombie Count: 0 "],["1:27:14", 0, "Uptime: 1:27:14<br/>App Count: 0", 0, "Uptime: 1:27:14<br/>Zombie Count: 0 "],["1:27:34", 0, "Uptime: 1:27:34<br/>App Count: 0", 0, "Uptime: 1:27:34<br/>Zombie Count: 0 "],["1:27:54", 0, "Uptime: 1:27:54<br/>App Count: 0", 0, "Uptime: 1:27:54<br/>Zombie Count: 0 "],["1:28:14", 0, "Uptime: 1:28:14<br/>App Count: 0", 0, "Uptime: 1:28:14<br/>Zombie Count: 0 "],["1:28:34", 0, "Uptime: 1:28:34<br/>App Count: 0", 0, "Uptime: 1:28:34<br/>Zombie Count: 0 "],["1:28:54", 0, "Uptime: 1:28:54<br/>App Count: 0", 0, "Uptime: 1:28:54<br/>Zombie Count: 0 "],["1:29:14", 0, "Uptime: 1:29:14<br/>App Count: 0", 0, "Uptime: 1:29:14<br/>Zombie Count: 0 "],["1:29:34", 0, "Uptime: 1:29:34<br/>App Count: 0", 0, "Uptime: 1:29:34<br/>Zombie Count: 0 "],["1:29:54", 0, "Uptime: 1:29:54<br/>App Count: 0", 0, "Uptime: 1:29:54<br/>Zombie Count: 0 "],["1:30:14", 0, "Uptime: 1:30:14<br/>App Count: 0", 0, "Uptime: 1:30:14<br/>Zombie Count: 0 "],["1:30:34", 0, "Uptime: 1:30:34<br/>App Count: 0", 0, "Uptime: 1:30:34<br/>Zombie Count: 0 "],["1:30:54", 0, "Uptime: 1:30:54<br/>App Count: 0", 0, "Uptime: 1:30:54<br/>Zombie Count: 0 "],["1:31:14", 0, "Uptime: 1:31:14<br/>App Count: 0", 0, "Uptime: 1:31:14<br/>Zombie Count: 0 "]]}];
xAxisView.forEach(function (r) {
  k = 0;
  r.data.forEach(function (d) {
    d[0] =  ++k;
  });
});

function drawChart() {
  // Create data table for Release version.
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Tick');
  data.addColumn('number', 'Apps1');
  data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
  data.addColumn('number', 'Zombies1');
  data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});

  data.addRows(xAxisView[0].data);

  //Create Data table for Golden version
  var data2 = new google.visualization.DataTable();
  data2.addColumn('number', 'Tick');
  data2.addColumn('number', 'App2');
  data2.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
  data2.addColumn('number', 'Zombies2');
  data2.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});

  data2.addRows(xAxisView[1].data);

  // Set additional chart options
  var myOptions = Object.assign({}, commonOptions);
  myOptions.pointSize = 3;
  myOptions.hAxis['showTextEvery'] =1;
  myOptions.vAxis['viewWindow'] = {};
  myOptions.vAxis['format'] = "###";
  myOptions.vAxis['minValue'] = 0;
  myOptions.vAxis['maxValue'] = 5;
  myOptions.interpolateNulls = true;

  // include all columns
  var joinedData = google.visualization.data.join(data, data2, 'full', [[0,0]], [1, 2, 3, 4], [1, 2, 3, 4]);
  var lineChart = new google.visualization.LineChart(document.querySelector('#chart_div'));
  lineChart.draw(joinedData, myOptions);
}

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

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