javascript - 如何格式化数据并编写 javascript 代码来显示双 y 谷歌柱形图

Question

我正在使用 google 图表通过 PHP 从数据库中提取多个不同图表的数据。其中一个图表是带有双 y 图表的柱形图，其中一个条形图显示上一年的数据，一个条形图显示当年的数据。不幸的是，我不知道如何将数据转换为可以使用的格式。

如何获取将显示为双 Y 图表的数据格式以及如何显示它？

<?php
//Mock-up of PHP Code
//Single Column Chart - Works perfectly
$data['cols'][] = array('id' => 'period','label' => 'period','type' => 'string');
$data['cols'][] = array('id' => 'cases','label' => 'cases','type' => 'number');

$data_from_db = $db_object->getData();

foreach($data_from_db as $key => $value){
    $data['rows'][]['c'] = array(array('v' => $key),array('v' => $value));
}

//My attempt at Dual-Y Data
$data['cols'][] = array('id' => 'cytd','label' => 'cytd','type' => 'string');
$data['cols'][] = array('id' => 'lbs','label' => 'lbs','type' => 'number');
$data['cols'][] = array('id' => 'pytd','label' => 'pytd','type' => 'string');
$data['cols'][] = array('id' => 'lbs','label' => 'lbs','type' => 'number');

$data_from_db = $db_object->getData();

foreach($data_from_db as $key => $value){
    $data['rows'][]['c'] = array(array('v' => $value['Category']),array('v' => $value['previous_year'],'v1' => $value['current_year']));
}

数据采用 PHP 格式

//Javascript
function insert_graph(graph_data_type,location,title,type,horizontal_axis,vertical_axis)
{
    $.ajax({
        type: 'get',
        url: 'getData.php?id='+id+'&graph='+graph_type,
        dataType: 'json',
        success:function(response){
            if(response === 'error'){
                //error handling
            }else if(null === response){
                //error handling
            }else{
                chart_data = response;

                google.charts.setOnLoadCallback(function(){
                    drawGoogleGraph(response,location,title,type,horizontal_axis,vertical_axis);
                });

            }
        }
    });
}

function drawGoogleGraph(chart_data,chart_location,chart_title,chart_type,horizontal_axis,vertical_axis)
{
    var data = new google.visualization.DataTable(chart_data);

    switch(chart_type){
        case 'column':
            var options = {
                title:chart_title,
                height: 250,
                hAxis:horizontal_axis,
                vAxis:vertical_axis
            },
            chart = new google.visualization.ColumnChart($('#'+chart_location)[0]);

            break;
    }

    chart.draw(data,options);
}

Answer 1

看起来您正在提供 cytd 和 pytd 作为绘图的“日期”。

默认情况下，您只能拥有一个域列
chartA 按月绘制图表，其中包含当前年份和上一年的列

如果您想提供多个域列，则需要显式分配 Angular 色 - chartB

例子不是很好，但应该能明白要点

chartB 示例是从 domain column role 的描述中提取的。

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

function drawChart() {
  var dataA = new google.visualization.DataTable();
  dataA.addColumn('string', 'Month');
  dataA.addColumn('number', 'Current Year');
  dataA.addColumn('number', 'Prior Year');
  dataA.addRow(['Jan',   1,  13]);
  dataA.addRow(['Feb', 200, 142]);
  dataA.addRow(['Mar',  32, 149]);
  dataA.addRow(['Apr', 378, 286]);
  dataA.addRow(['May', 200, 176]);
  dataA.addRow(['Jun',  20,  44]);
  dataA.addRow(['Jul', 503, 402]);
  dataA.addRow(['Aug', 380, 204]);
  dataA.addRow(['Sep', 705, 694]);
  dataA.addRow(['Oct', 965, 445]);
  dataA.addRow(['Nov', 236, 646]);
  dataA.addRow(['Dec', 405, 547]);

  var dataB = new google.visualization.DataTable();
  dataB.addColumn({type: 'string', role: 'domain'}, '2009 Quarter');
  dataB.addColumn('number', '2009 Sales');
  dataB.addColumn('number', '2009 Expenses');
  dataB.addColumn({type: 'string', role: 'domain'}, '2008 Quarter');
  dataB.addColumn('number', '2008 Sales');
  dataB.addColumn('number', '2008 Expenses');
  dataB.addRows([
    ['Q1 \'09', 1000, 400, 'Q1 \'08', 800, 300],
    ['Q2 \'09', 1170, 460, 'Q2 \'08', 750, 400],
    ['Q3 \'09', 660, 1120, 'Q3 \'08', 700, 540],
    ['Q4 \'09', 1030, 540, 'Q4 \'08', 820, 620]
  ]);

  var options = {
    chartArea: {
      width: '80%'
    },
    hAxis: {
      format: 'MMM'
    },
    legend: 'none',
    series: {
      0: {targetAxisIndex: 0},
      1: {targetAxisIndex: 1}
    },
    vAxes: {
      0: {title: 'Current Year'},
      1: {title: 'Prior Year'}
    }
  };

  var chartA = new google.visualization.ChartWrapper({
    chartType: 'ColumnChart',
    containerId: 'chart_divA',
    dataTable: dataA,
    options: options
  });
  chartA.draw();

  var chartB = new google.visualization.ChartWrapper({
    chartType: 'ColumnChart',
    containerId: 'chart_divB',
    dataTable: dataB,
    options: options
  });
  chartB.draw();
}

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