Question

首先，我对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);
}

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

Answer 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'],

next ，第一个系列的比例很小，与第二个系列在同一个y轴上显示时不可见

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

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

请参阅以下工作代码段...

＆＃13;

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

＆＃13;

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

＆＃13;

谷歌的Api chartArea。在图表中绘制2个图形

1 个答案: