Question

我试图从一组结果中填充morris.js图表。在我的控制器中，我创建了一个结果数组，并使用json_encode创建一个json数组，这是我在视图中使用print_r的输出：

{"Positive":7,"Negative":26,"Pending":786,"Contact the Clinic":242,"Misc":2}

如何将此数据传递给我的morris.js图表以使用此数据作为标签/值对填充图表？我尝试的一切，我得到一个空白的图表或＆＃34; undefined＆＃34;变量或＆＃34; NaN＆＃34;。这是我的控制器：

function execute_search()
{
    // Retrieve the posted search term.
    $search_term = $this->input->post('search');

    // Get results count and pass it as json:
    $data = $this->search_model->count_res('$p_results_data');
    $pos = 0; $neg= 0; $pen = 0; $cont = 0; $misc = 0;
    foreach ($data as $item) {
        if ($item['result'] === 'Positive') {
            $pos++;
        } elseif ($item['result'] === 'Negative') {
            $neg++;
        } elseif ($item['result'] === 'Pending') {
            $pen++;
        } elseif ($item['result'] === 'Contact the Clinic') {
            $cont++;
        } else {
            $misc++;
        }
    }
    $res = array("Positive"=>$pos, "Negative"=>$neg, "Pending"=>$pen, "Contact the Clinic"=>$cont, "Misc"=>$misc);
    $data = json_encode($res);

    // Use the model to retrieve results:
    $this->data['results'] = $this->search_model->get_results($search_term);
    $this->data['chart'] = $data;
    $this->data['totals'] = $this->search_model->total_res('$total_res');

    // Pass the results to the view.
    $this->data['subview'] = ('user/search_results');
    $this->load->view('_layout_admin', $this->data);
}

和我的morris.js：

$results = "<?php echo $chart ?>";
new Morris.Donut({
    element: 'donutEg',
    data: [
        $results
    ],
});

非常感谢任何帮助

Answer 1

假设您的morris.js是一个普通的javascript文件，默认情况下你不能使用php：服务器不会解析.js文件，所以php源代码会出现在你的javascript中。

您需要：

将morris.js脚本内容放在javascript块的php页面中，以便解析php;
从morris.js脚本发出ajax请求，以便在单独的请求中从服务器获取数据;
设置服务器以解析.js个文件，就好像它们是/包含php一样。

最后一个只是为了说明你需要什么，我不建议这样做。

Answer 2

在javascript中，JSON.parse是你的朋友，假设你拥有由PHP的json_encode函数创建的JSON：

$results = "<?php echo $chart ?>";
new Morris.Donut({
    element: 'donutEg',
    data: [
        JSON.parse( $results )
    ],
});

或者可能

$results = "<?php echo $chart ?>";
new Morris.Donut({
    element: 'donutEg',
    data: JSON.parse( $results )
});

但我做的方式

在视图中：

<input type="hidden" id="chartData" value='<?php echo $chart; ?>' />

在JS中（使用jQuery）：

var chartData = $('#chartData').val();
new Morris.Donut({
    element: 'donutEg',
    data: JSON.parse( chartData )
});

在查看morris.js的文档后，我发现这是你能以正确的方式做到的：

// Looking at the docs for morris.js:
// http://jsbin.com/ukaxod/144/embed?js,output

// This is your data, but it's all in one json object
var chartData = JSON.parse( $('#chartData').val() );

// We need to break up that object into parts of the donut
var donutParts = [];
$.each( chartData, function(k,v){
    donutParts.push({
        label: k,
        value: v
    });
});

// Now create the donut
Morris.Donut({
    element: 'donutEg',
    data: donutParts
});

我如何将一个JSON数组从php传递给JS？

2 个答案: