如何用不同的x轴值绘制Google折线图

Question

有两个这样的值：

var company1 = [
    [new Date(2004, 12, 1), 1000],
    [new Date(2004, 12, 3), 500],
    [new Date(2004, 12, 7), 950]
    [new Date(2004, 12, 8), 1000]];
var company2 = [
    [new Date(2004, 12, 2), 800],
    [new Date(2004, 12, 4), 600],
    [new Date(2004, 12, 5), 300]
    [new Date(2004, 12, 8), 500]];

我想画一个这样的图表。

要绘制这样的折线图，是否需要创建这样的数组？

  ['2004/12/1', 1000, null],
  ['2004/12/2', 750, 800],
  ['2004/12/3', 500, 700],
  ['2004/12/4', 650, 600],
  ['2004/12/5', 800, 300],
  ['2004/12/7', 950, 400],
  ['2004/12/8', 1000, 500]

还是有一种更简单的方法来创建具有不同x轴值的图表？

这是图表的jsfiddle代码段。 https://jsfiddle.net/fe26/u3n8qsay/

Answer 1

您可以使用google_visualization_data_join合并两组数据。 查看Google图表-同一图表上的两个日期系列

 google.charts.load('current', {'packages': ['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data1 = new google.visualization.DataTable(); data1.addColumn('date', 'Date'); data1.addColumn('number', 'Company 1'); data1.addRows([ [new Date(2004, 11, 1), 1000], [new Date(2004, 11, 3), 500], [new Date(2004, 11, 7), 950], [new Date(2004, 11, 8), 1000] ]); var data2 = new google.visualization.DataTable(); data2.addColumn('date', 'Date'); data2.addColumn('number', 'Company 2'); data2.addRows([ [new Date(2004, 11, 2), 800], [new Date(2004, 11, 4), 600], [new Date(2004, 11, 5), 300], [new Date(2004, 11, 8), 500] ]); var joinedData = google.visualization.data.join(data1, data2, 'full', [[0, 0]], [1], [1]); var chart = new google.visualization.LineChart(document.querySelector('#chart_div')); chart.draw(joinedData, { height: 300, width: 600, interpolateNulls: true }); } 

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