5列带有data.join方法的Google图表 [英] Google chart with 5 columns with data.join method

问题描述

使用Google图表Iam试图将两个图表合并为一个图表.但是我有以下是5个列值.最终图表将包含4个折线图.但是现在它仅包含2个折线图.

Using google chart Iam trying to combine two graphs in a single graph.But i have 5 colummn values as follows.The final chart will contains 4 line graphs.But roght now it contains only 2.

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

For data1 line graphs of App1 and Seloger1

对于data2App2和Seloger2的线形图

For data2 line graphs of App2 and Seloger2

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

Final graph will contain 4 line graphs of App1,App2 and Seloger1 and seloger 2

推荐答案

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

need to include each column index,
from each data table,
that should be included in the join

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

请参阅以下工作摘要...

see following working snippet...

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>

这篇关于5列带有data.join方法的Google图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！