Question

大家好我有一个查询我如何在Google Chart中设置三个Axis，我在下面使用这些代码并且它在2轴上正常工作但是我需要在右边添加Date - 左轴上的轴和数量以及轴上轴的顺序时间。我把演示数据放在图表中基本上我使用PHP fetch从数据库中获取数据并在图表中显示。

＆＃13;

           var DownloadButton = '<a href="{domain}/download.php?id={fileId}" title="Download" class="btn btn-danger  table_btn btn-outline btn-sm" target="_blank"><i class="fa fa-download"></i></a>';

＆＃13;

      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
  ['Ordertime', 'Qty'],
  ['0', 24],
  ['1', 15],
  ['2', 10],
  ['3', 34],
  ['4', 65],
  ['5', 72],
  ['6', 18],
  ['7', 73],
  ['8', 80],
  ['9', 50],
  ['10', 40],
  ['11', 49],
  ['12', 70],
]);

var options = {
  title:'Sales by Category (Arabi) Branch (Madinah) Date (2018-03-15)',
  hAxis: {title: 'Sales By Time',  titleTextStyle: {color: '#333'}},
  vAxis: {minValue: 0},
  series: {
            0: { color: '#885426' },
            1: { color: '#008000' },
          },
  areaOpacity: 0.1,
  pointSize: 5,
        
};

var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}

＆＃13;

我需要什么我向您展示我从phpmyadmin显示图表中获得的示例图片，下面的图片.... enter image description here

使用此PHP代码从数据库中获取数据

  <!-- Chart js -->
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <!-- JQuery JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- HTML Tag -->
<div id="chart_div" style="width: 100%; height: 400px;"></div>

Answer 1

为了产生所需的图表，
数据需要按如下方式构建，
每个日期都有一列值...

['Ordertime', '2018-02-15', '2018-02-22'],
['0', 24, 26],
['1', 15, 13],
['2', 10, 15],
['3', 34, 30],
['4', 65, 67],
['5', 72, 70],
['6', 18, 20],
['7', 73, 70],
['8', 80, 85],
['9', 50, 55],
['10', 40, 43],
['11', 49, 48],
['12', 70, 70]

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

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Ordertime', '2018-02-15', '2018-02-22'],
    ['0', 24, 26],
    ['1', 15, 13],
    ['2', 10, 15],
    ['3', 34, 30],
    ['4', 65, 67],
    ['5', 72, 70],
    ['6', 18, 20],
    ['7', 73, 70],
    ['8', 80, 85],
    ['9', 50, 55],
    ['10', 40, 43],
    ['11', 49, 48],
    ['12', 70, 70]
  ]);

  var options = {
    chartArea: {
      height: '100%',
      width: '100%',
      top: 60,
      left: 60,
      right: 160,
      bottom: 60
    },
    height: '100%',
    width: '100%',
    title: 'Sales by Category (Arabi) Branch (Madinah) Date (2018-03-15)',
    hAxis: {title: 'Sales By Time',  titleTextStyle: {color: '#333'}},
    vAxis: {minValue: 0},
    series: {
      0: { color: '#885426' },
      1: { color: '#008000' },
    },
    areaOpacity: 0.1,
    pointSize: 5,
  };

  var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
  chart.draw(data, options);
});

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

如何在谷歌图表中设置3轴（V轴左侧为数量，V轴右侧为系列列，H轴为TimeOrder）？

1 个答案: