Question

如何从回调函数发送图表选项？

我有以下javascript函数，但想从我的回调中获取图表选项。问题是我不知道如何“回显json表”以及传递选项。

 public function draw_revenue(){            

        $graph_data = $this->xxxModel->get_history($currentID, $table, $graph_start_date);

        $rows = array();
        foreach($graph_data->result() as $row){
            $temp = array();
            $table_values['cols'] = array(
            //Labels for the chart, these represent the column titles
            array('id' => '', 'label' => 'Date', 'type' => 'string'),
            array('id' => '', 'label' => $table, 'type' => 'number')
            );
            //Values
            $temp[] = array('v' => (string) $row->date);
            $temp[] = array('v' => (float) $row->$table); 
            $rows[] = array('c' => $temp);
        }

        $graph_data->free_result();
        $table_values['rows'] = $rows;

        $jsonTable = json_encode($table_values, true);
        echo $jsonTable;
// How can I add some options generated from the callback to my chart? Such as title, depending of the date...
    }

我的回调函数（简称）：

var data2 = new google.visualization.DataTable(jsonData[0]['data']);
var options = jsonData[1]['options'];

更新：它使用@WhiteHat代码工作正常，但我不得不改变我在JS函数中检索数组的方式。以下工作：

Uncaught ReferenceError: require is not defined

Answer 1

在php中，您可以使用另一个array()将数据和选项打包在一起......

public function draw_revenue(){
    $graph_data = $this->xxxModel->get_history($currentID, $table, $graph_start_date);

    $rows = array();
    foreach($graph_data->result() as $row){
        $temp = array();
        $table_values['cols'] = array(
        //Labels for the chart, these represent the column titles
        array('id' => '', 'label' => 'Date', 'type' => 'string'),
        array('id' => '', 'label' => $table, 'type' => 'number')
        );
        //Values
        $temp[] = array('v' => (string) $row->date);
        $temp[] = array('v' => (float) $row->$table);
        $rows[] = array('c' => $temp);
    }

    $graph_data->free_result();
    $table_values['rows'] = $rows;

    $chart_options = array('title' => 'Chart Title');

    $chart_package = array();
    $chart_package[] = array('data' => $table_values);
    $chart_package[] = array('options' => $chart_options);

    $jsonTable = json_encode($chart_package, true);
    echo $jsonTable;
}

然后在javascript中将它们拆分出来

注意：强烈建议不要使用async: false

currentId = $('#currentId').attr('value');
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawRevenue);

function drawRevenue() {
    // Define the chart to be drawn.
    $.ajax({
        type: "POST",
        url: Settings.base_url+"xxController/draw",
        data: "currentID="+currentId+"&table=cash",
        dataType: "json"
    }).done(function (jsonData) {
      // Create our data table out of JSON data loaded from server.
      var data = new google.visualization.DataTable(jsonData.data);
      // Set options the chart.
      var options = jsonData.options;
      var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
      chart.draw(data, options);
    });
}

通过回调发送Google Charts选项

1 个答案: