Javascript 通过回调发送谷歌图表选项

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

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

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

function drawRevenue() {
    // Define the chart to be drawn.
    var jsonData = $.ajax({
        type: "POST",
        url: Settings.base_url+"xxController/draw",
        data: "currentID="+currentId+"&table=cash",
        dataType:"json",
        async: false
        }).responseText;

    // Create our data table out of JSON data loaded from server.
    var data = new google.visualization.DataTable(jsonData);
    // Set options the chart.
    // This is the part I want to get dynamically from the callback (I have more options)
    var options = {title:titleRevenueChart};
    var chart = new google.visualization.LineChart(document.getElementById('curve_chart')); 
    chart.draw(data, options);
}

我的回拨功能（简化）：

更新： 使用@WhiteHat代码可以很好地工作，但我必须改变在JS函数中检索数组的方式。以下方面发挥了作用：

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

---

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

---

它几乎起作用了！使用代码时，我收到一条错误消息，说没有列。我发现

数据

数组没有发送到JS。如果我在$chart_包定义中切换

数据

和

选项

行，则

选项

将丢失。你能看到这两行有什么问题吗？是的，对不起，看起来我在添加到新数组时忘记添加括号了，我更改了上面的答案…还没有，这两个数组被发送到JS，但是当我提醒

（jsonData.data）

或

（jsonData.options）

时，我得到了

未定义的

。明天我会努力修复这个问题，并更新主题！np，只是想确保您注意到我在上面对-->

$chart\u package[]

所做的更改，通过稍微修改我在JS中检索数组的方式使它工作起来。我会更新我的帖子。谢谢

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