Google 的 Api 图表区域。在图表中绘制 2 个图形答案

【问题标题】：Google's Api chartArea. Draw 2 graphs in a chartGoogle 的 Api 图表区域。在图表中绘制 2 个图形
【发布时间】：2017-03-07 10:55:04
【问题描述】：

首先我对 PHP 语言不太了解 ????。尽管如此，我在使用 Google 的 API（google.visualization.DataTable）表示区域图时遇到了问题。当我尝试使用相同的轴同时绘制两个图时，第一个图绘制得很好，但之后，一条线绘制到下一个图开始的点（然后是第二个图）。但是，如果我在单独的图表中绘制每个图表，则该程序运行良好。我使用 addRows 例程来传递所有数据。（两个图的长度相同）

我该怎么做？

我做错了什么？

其中一个... 另一个 ... 两个都。错误的图表

google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('timeofday', 'Time');
  data.addColumn('number', 'Value (kW)');
  data.addColumn({
    type: 'string',
    role: 'style'
  });


  data.addRows([
    [{
      v: [06, 04, 0],
      f: 'Last year C.D : 06:04-06:19'
    }, 0, '#e874d2'],
    [{
      v: [06, 19, 0],
      f: 'Last year C.D : 06:19-06:34'
    }, 0, '#e874d2'],
    [{
      v: [06, 34, 0],
      f: 'Last year C.D : 06:34-06:49'
    }, 0, '#e874d2'],
    [{
      v: [06, 49, 0],
      f: 'Last year C.D : 06:49-07:4'
    }, 0, '#e874d2'],
    [{
      v: [07, 04, 0],
      f: 'Last year C.D : 07:04-07:19'
    }, 0.001395, '#e874d2'],
    [{
      v: [07, 19, 0],
      f: 'Last year C.D : 07:19-07:34'
    }, 0, '#e874d2'],
    [{
      v: [07, 34, 0],
      f: 'Last year C.D : 07:34-07:49'
    }, 0, '#e874d2'],
    [{
      v: [07, 49, 0],
      f: 'Last year C.D : 07:49-08:4'
    }, 0, '#e874d2'],
    [{
      v: [08, 04, 0],
      f: 'Last year C.D : 08:04-08:19'
    }, 0, '#e874d2'],
    [{
      v: [08, 19, 0],
      f: 'Last year C.D : 08:19-08:34'
    }, 0, '#e874d2'],
    [{
      v: [08, 34, 0],
      f: 'Last year C.D : 08:34-08:49'
    }, 0, '#e874d2'],
    [{
      v: [08, 49, 0],
      f: 'Last year C.D : 08:49-09:4'
    }, 0, '#e874d2'],
    [{
      v: [06, 30, 0],
      f: 'Today C.D: 06:30-06:45'
    }, 1.008, '#109895'],
    [{
      v: [06, 45, 0],
      f: 'Today C.D: 06:45-07:00'
    }, 1.728, '#109895'],
    [{
      v: [07, 00, 0],
      f: 'Today C.D: 07:00-07:15'
    }, 1.744, '#109895'],
    [{
      v: [07, 15, 0],
      f: 'Today C.D: 07:15-07:30'
    }, 1.76, '#109895'],
    [{
      v: [07, 34, 0],
      f: 'Today C.D: 07:34-07:49'
    }, 1.76, '#109895'],
    [{
      v: [07, 49, 0],
      f: 'Today C.D: 07:49-08:4'
    }, 1.76, '#109895'],
    [{
      v: [08, 04, 0],
      f: 'Today C.D: 08:04-08:19'
    }, 2.768, '#109895'],
    [{
      v: [08, 19, 0],
      f: 'Today C.D: 08:19-08:34'
    }, 3.408, '#109895'],
    [{
      v: [08, 34, 0],
      f: 'Today C.D: 08:34-08:49'
    }, 3.36, '#109895'],
  ]);

  var options = {

    chartArea: {
      top: '3%',
      width: '90%',
      height: '80%'
    },
    legend: {
      position: 'none'
    },
    vAxis: {
      title: 'Power (kW)',
    },

    hAxis: {
      title: 'Time',
      format: 'HH:mm',
      gridlines: {
        count: 10
      }
    }
  };

  var chart = new google.visualization.AreaChart(document.getElementById('chart_div4'));

  chart.draw(data, options);
}

&lt;script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"&gt;&lt;/script&gt;

【问题讨论】：

对于初学者来说是 javascript 而不是 php。

标签： javascript charts google-api google-visualization

【解决方案1】：

首先，每个图表或系列都需要在数据中拥有自己的一组列

var data = new google.visualization.DataTable();
data.addColumn('timeofday', 'Time');
// series 0
data.addColumn('number', 'Value (kW)');
data.addColumn({
  type: 'string',
  role: 'style'
});
// series 1
data.addColumn('number', 'Value (kW)');
data.addColumn({
  type: 'string',
  role: 'style'
});

将null 用于行不重合的列值

[{
  v: [08, 49, 0],
  f: 'Last year C.D : 08:49-09:4'
}, 0, '#e874d2', null, null],
[{
  v: [06, 30, 0],
  f: 'Today C.D: 06:30-06:45'
}, null, null, 1.008, '#109895'],

下一个，第一个系列的比例太小了，和第二个系列在同一y轴上显示时是不可见的

这将为第二个系列分配它自己的 y 轴...

series: {
  1: {
    targetAxisIndex: 1
  }
},

请参阅以下工作 sn-p...

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

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('timeofday', 'Time');
  data.addColumn('number', 'Value (kW)');
  data.addColumn({
    type: 'string',
    role: 'style'
  });
  data.addColumn('number', 'Value (kW)');
  data.addColumn({
    type: 'string',
    role: 'style'
  });


  data.addRows([
    [{
      v: [06, 04, 0],
      f: 'Last year C.D : 06:04-06:19'
    }, 0, '#e874d2', null, null],
    [{
      v: [06, 19, 0],
      f: 'Last year C.D : 06:19-06:34'
    }, 0, '#e874d2', null, null],
    [{
      v: [06, 34, 0],
      f: 'Last year C.D : 06:34-06:49'
    }, 0, '#e874d2', null, null],
    [{
      v: [06, 49, 0],
      f: 'Last year C.D : 06:49-07:4'
    }, 0, '#e874d2', null, null],
    [{
      v: [07, 04, 0],
      f: 'Last year C.D : 07:04-07:19'
    }, 0.001395, '#e874d2', null, null],
    [{
      v: [07, 19, 0],
      f: 'Last year C.D : 07:19-07:34'
    }, 0, '#e874d2', null, null],
    [{
      v: [07, 34, 0],
      f: 'Last year C.D : 07:34-07:49'
    }, 0, '#e874d2', null, null],
    [{
      v: [07, 49, 0],
      f: 'Last year C.D : 07:49-08:4'
    }, 0, '#e874d2', null, null],
    [{
      v: [08, 04, 0],
      f: 'Last year C.D : 08:04-08:19'
    }, 0, '#e874d2', null, null],
    [{
      v: [08, 19, 0],
      f: 'Last year C.D : 08:19-08:34'
    }, 0, '#e874d2', null, null],
    [{
      v: [08, 34, 0],
      f: 'Last year C.D : 08:34-08:49'
    }, 0, '#e874d2', null, null],
    [{
      v: [08, 49, 0],
      f: 'Last year C.D : 08:49-09:4'
    }, 0, '#e874d2', null, null],
    [{
      v: [06, 30, 0],
      f: 'Today C.D: 06:30-06:45'
    }, null, null, 1.008, '#109895'],
    [{
      v: [06, 45, 0],
      f: 'Today C.D: 06:45-07:00'
    }, null, null, 1.728, '#109895'],
    [{
      v: [07, 00, 0],
      f: 'Today C.D: 07:00-07:15'
    }, null, null, 1.744, '#109895'],
    [{
      v: [07, 15, 0],
      f: 'Today C.D: 07:15-07:30'
    }, null, null, 1.76, '#109895'],
    [{
      v: [07, 34, 0],
      f: 'Today C.D: 07:34-07:49'
    }, null, null, 1.76, '#109895'],
    [{
      v: [07, 49, 0],
      f: 'Today C.D: 07:49-08:4'
    }, null, null, 1.76, '#109895'],
    [{
      v: [08, 04, 0],
      f: 'Today C.D: 08:04-08:19'
    }, null, null, 2.768, '#109895'],
    [{
      v: [08, 19, 0],
      f: 'Today C.D: 08:19-08:34'
    }, null, null, 3.408, '#109895'],
    [{
      v: [08, 34, 0],
      f: 'Today C.D: 08:34-08:49'
    }, null, null, 3.36, '#109895'],
  ]);

  var options = {
    chartArea: {
      top: '3%',
      width: '90%',
      height: '80%'
    },
    legend: {
      position: 'none'
    },
    vAxis: {
      title: 'Power (kW)',
    },

    series: {
      1: {
        targetAxisIndex: 1
      }
    },

    hAxis: {
      title: 'Time',
      format: 'HH:mm',
      gridlines: {
        count: 10
      }
    }
  };

  var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));

  chart.draw(data, options);
}

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

【讨论】：