javascript - 使用谷歌图表在单个图表中显示多条线图

Question

尝试使用谷歌图表在单个图表中比较两个版本(严格的内存使用情况)。在图中，我想比较以前的版本 3.20.62 和最新版本 3.21.50 的性能与内存使用情况。X 轴代表相应的版本构建的正常运行时间(3.21.50 从 1.24.22 AM 开始，并在 1.24.42 AM 再次重新启动，轮询间隔为 20 秒。与 3.20.62 的情况相同)。

无论构建何时开始。我的目的是显示两个版本在不同重新启动时的内存使用情况(例如版本从 1:24:22 开始，然后在 1:24:42 重新启动，等等..)间隔)。在这张图中很难比较版本 3.20.62 和 3.21.50 的内存使用情况。因为版本 3.20.62 的第二行从 x 轴的第 14 个位置开始。我必须从第 1 行开始 3.20.62Xaxis 的位置..这样我可以很容易地比较内存使用情况...版本构建何时开始并不重要..

例如，在 v.3.21.50 的第二次重新启动中，其内存使用量为 970，而 v.3.20.62 的内存使用量为 911 MB。我也想合并这些行。我该怎么做？我不知道如何实现这个？有什么想法吗？

代码

function drawChart() {
        // Create our data table.
        var data = new google.visualization.DataTable();           
        data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});

        data.addRows([["1:24:22", 969]]);


        // Set additional chart options
        var myOptions = Object.assign({}, commonOptions);
        myOptions.pointSize = 3;           


        var data1 = new google.visualization.DataTable();
        data1.addColumn('string', 'Tick');


        data1.addRows([["2:20:04", 911]]);


        var joinedData = google.visualization.data.join(data, data1, 'full', [[0, 0]], [1], [1]);
        var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
        chart.draw(joinedData, myOptions);

    }

Answer 1

这可能会得到更好的比较 View :

http://jsfiddle.net/XF7JE/491/

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
      }
    }
  },
  releases = [{
    vs: '3.21.50',
    data: [
      ["1:24:22", 969, "Uptime: 1:24:22<br/>Memory Used: 969 MB"],
      ["1:24:42", 970, "Uptime: 1:24:42<br/>Memory Used: 970 MB"],
      ["1:25:03", 972, "Uptime: 1:25:03<br/>Memory Used: 972 MB"],
      ["1:25:23", 973, "Uptime: 1:25:23<br/>Memory Used: 973 MB"],
      ["1:25:43", 974, "Uptime: 1:25:43<br/>Memory Used: 974 MB"],
      ["1:26:03", 975, "Uptime: 1:26:03<br/>Memory Used: 975 MB"],
      ["1:26:23", 978, "Uptime: 1:26:23<br/>Memory Used: 978 MB"],
      ["1:26:43", 399, "Uptime: 1:26:43<br/>Memory Used: 399 MB"],
      ["1:27:03", 906, "Uptime: 1:27:03<br/>Memory Used: 906 MB"],
      ["1:27:23", 1231, "Uptime: 1:27:23<br/>Memory Used: 1231 MB"],
      ["1:27:43", 483, "Uptime: 1:27:43<br/>Memory Used: 483 MB"],
      ["1:28:03", 800, "Uptime: 1:28:03<br/>Memory Used: 800 MB"],
      ["1:28:23", 1079, "Uptime: 1:28:23<br/>Memory Used: 1079 MB"]
    ]
  }, {
    vs: '3.20.62',
    data: [
      ["2:20:04", 911, "Uptime: 2:20:04<br/>Memory Used: 911 MB"],
      ["2:20:24", 914, "Uptime: 2:20:24<br/>Memory Used: 914 MB"],
      ["2:20:44", 916, "Uptime: 2:20:44<br/>Memory Used: 916 MB"],
      ["2:21:04", 920, "Uptime: 2:21:04<br/>Memory Used: 920 MB"],
      ["2:21:24", 921, "Uptime: 2:21:24<br/>Memory Used: 921 MB"],
      ["2:21:44", 924, "Uptime: 2:21:44<br/>Memory Used: 924 MB"],
      ["2:22:04", 927, "Uptime: 2:22:04<br/>Memory Used: 927 MB"],
      ["2:22:24", 639, "Uptime: 2:22:24<br/>Memory Used: 639 MB"],
      ["2:22:44", 685, "Uptime: 2:22:44<br/>Memory Used: 685 MB"],
      ["2:23:04", 803, "Uptime: 2:23:04<br/>Memory Used: 803 MB"],
      ["2:23:24", 827, "Uptime: 2:23:24<br/>Memory Used: 827 MB"],
      ["2:23:44", 853, "Uptime: 2:23:44<br/>Memory Used: 853 MB"],
      ["2:24:04", 941, "Uptime: 2:24:04<br/>Memory Used: 941 MB"]
    ]
  }];

releases.forEach(function(r){
  k = 0;
  r.data.forEach(function(d){ 
    d[0] = ++k;
  });
});

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

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


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


  var data1 = new google.visualization.DataTable();
  data1.addColumn('number', 'Tick');
  data1.addColumn('number', 'Previous Version:  3.20.62');
  data1.addColumn({
    'type': 'string',
    'role': 'tooltip',
    'p': {
      'html': true
    }
  });


  data1.addRows(releases[1].data);


  var joinedData = google.visualization.data.join(data, data1, 'full', [
    [0, 0]
  ], [1], [1]);
  var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
  chart.draw(joinedData, myOptions);
}
google.load('visualization', '1', {
  packages: ['corechart'],
  callback: drawChart
});

<script src="https://www.google.com/jsapi?fake=.js"></script>
<html>

<head>
  <script src="https://www.google.com/jsapi?fake=.js"></script>
</head>

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

</html>