一个数据集，两个图表？

Question

我有一个数据集，想要创建两个图表。我困扰的是如何将数据集组件分配给系列响应轴：

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

function drawChart() {
  var gcParamsHvTimeDiv = document.getElementById('gcDivParamsHvTime');
  var gcParamsHvPathDiv = document.getElementById('gcDivParamsHvPath');
  
  var dataParamsHv = new google.visualization.DataTable();

dataParamsHv.addColumn('timeofday', 'Time');
dataParamsHv.addColumn('number', 'Height');
dataParamsHv.addColumn('number', 'Speed');
dataParamsHv.addColumn('number', 'Flightpath');

dataParamsHv.addRows([
 [[16,07,35],170,0.00,0.00], /*...*/ [[17,35,55],248,0.87,106.36]
]);

现在我想根据给定的数据集创建两个图表：“高度和速度与时间”和“高度和速度与飞行路径”。

  var gcParamsHvTimeOptions = {
    title: 'Height and speed - time',
    width: 1000,
    height: 600,
    chartArea: { left: '7%', top: '9%', right: '7%', bottom: '9%', backgroundColor: {strokeWidth: 1, stroke: '#666'}},
    // Gives each series an axis that matches the vAxes number below.
    series: {
      0: {targetAxisIndex: 0, lineDashStyle: [3, 1]},
      1: {targetAxisIndex: 1}
    },
    vAxes: {
      0: {title: 'Height [m]'},
      1: {title: 'Speed [km/h]'}
    },
    hAxis: {
      title: 'Time [h:m]',
      titleTextStyle: {italic: false, bold: true}
    },
    vAxis: {
      titleTextStyle: {italic: false, bold: true},
      gridlines: {count: 7},
      minorGridlines: {count: 0}
    }
  };

  var gcParamsHvPathOptions = {
    title: 'Height and speed - flight path',
    width: 1000,
    height: 600,
    chartArea: { left: '7%', top: '9%', right: '7%', bottom: '9%', backgroundColor: {strokeWidth: 1, stroke: '#666'}},
    // Gives each series an axis that matches the vAxes number below.
    series: {
      0: {targetAxisIndex: 0, lineDashStyle: [3, 1]},
      1: {targetAxisIndex: 1}
    },
    vAxes: {
      0: {title: 'Height [m]'},
      1: {title: 'Speed [km/h]'}
    },
    hAxis: {
      title: 'Flight path [km]',
      titleTextStyle: {italic: false, bold: true}
    },
    vAxis: {
      titleTextStyle: {italic: false, bold: true},
      gridlines: {count: 7},
      minorGridlines: {count: 0}
    }
  };

  function gcDrawParams() {
    var chartParamsHvTime = new google.visualization.LineChart(gcParamsHvTimeDiv);
    chartParamsHvTime.draw(dataParamsHv, gcParamsHvTimeOptions);
    var chartParamsHvPath = new google.visualization.LineChart(gcParamsHvPathDiv);
    chartParamsHvPath.draw(dataParamsHv, gcParamsHvPathOptions);
  }
  gcDrawParams();
}

那么如何为

series

分配适当的索引。

vAxes

？

我让它使用两个不同的数据集，但这意味着冗余数据（高度、速度），我想避免。

谢谢你 马库斯

Answer 1

要将一个数据集用于多个图表，请通过指定要使用的列索引来操作每个图表的 DataTable 视图。

function gcDrawParams() {
  var viewForTime = new google.visualization.DataView(dataParamsHv);
  viewForTime.setColumns([0, 1, 2]);  // Time, Height, Speed

  var chartParamsHvTime = new google.visualization.LineChart(gcParamsHvTimeDiv);
  chartParamsHvTime.draw(viewForTime, gcParamsHvTimeOptions);

  var viewForPath = new google.visualization.DataView(dataParamsHv);
  viewForPath.setColumns([3, 1, 2]);  // Flightpath, Height, Speed

  var chartParamsHvPath = new google.visualization.LineChart(gcParamsHvPathDiv);
  chartParamsHvPath.draw(viewForPath, gcParamsHvPathOptions);
}

通过这种方式，您可以在以不同方式呈现数据的同时维护数据的一个真实来源。