Question

使用谷歌图表在单个图表中对两个版本（aganist内存使用情况）进行比较。在图中我想比较以前的版本3.20.62和最新的版本3.21.50性能aganist内存使用.X轴represnts对应版本构建的正常运行时间（3.21.50从上午1.24.22开始，再次在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.62 Xaxis的位置。所以我可以很容易地比较内存使用情况......版本构建开始时没有重要意义..

例如，在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

这可能会得到更好的比较观点：

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

＆＃13;

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

＆＃13;

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

＆＃13;

使用谷歌图表在单个图表中的多个线图

1 个答案: