如何从通过我的控制器发送的结果中动态填充morris.js图表​​?

时间:2017-08-11 11:24:14

标签: javascript php codeigniter morris.js

即时通讯使用最新的codeigniter框架,我正在处理基于表单输入搜索数据库的数据库搜索功能,结果将发送到数组中的视图,其中包含模型中生成的搜索中的所有数据。 / p>

我试图使用这些数据来填充morris.js图表​​,但我已经碰壁了。我可以使用php提取我需要的数据但是如何使用这些数据来填充图表呢?

这是基本图表js:

new Morris.Donut({
// ID of the element in which to draw the chart.
element: 'donutEg',
// Chart data records -- each entry in this array corresponds to a point on
// the chart.
data: [
    {label: "Positive", value: 7},
    {label: "Negative", value: 26},
    {label: "Pending", value: 786},
    {label: "Contact Clinic", value: 243},
    {label: "Unspecified", value: 1}
],
// A list of names of data record attributes that contain y-values.
ykeys: ['value'],
});

我想使用这些php变量填充结果:

<?php $pos = 0; $neg= 0; $pen = 0; $cont = 0; $misc = 0;
    foreach ($chart 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);
    }; echo 'Positive Results: ' . $pos . '<br />' . "Negative Results: " . $neg . '<br />' . "Pending Results: " . $pen . '<br />' .
        "Contact Results: " . $cont . '<br />' . "Misc Results: " . $misc . '<hr />'; ?>

我将如何使用阵列&#39; $ res&#39;使用命名键作为图表标签和相应的值作为值填充图表?

干杯

**更新** 使用@nando建议的代码我只得到一个段:正值,值为NaN(尽管值是数字,正数= 7)

new Morris.Donut({
    // ID of the element in which to draw the chart.
    element: 'donutEg',
    // Chart data records -- each entry in this array corresponds to a point on
    // the chart.
    data: [
        {label: "Positive", value: "<?php echo $res['Positive'] ?>"},
        {label: "Negative", value: "<?php echo $res['Negative'] ?>"},
        {label: "Pending", value: "<?php echo $res['Pending'] ?>"},
        {label: "Contact Clinic", value: "<?php echo $res['Contact the Clinic'] ?>"},
        {label: "Unspecified", value: "<?php echo $res['Misc'] ?>"}
    ],
});

**进一步更新** 我有以下JSON数组:

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

如何将这些值分配给我的图表?

1 个答案:

答案 0 :(得分:0)

您可以在javascript端<?php echo ?>执行此操作:

new Morris.Donut({
    // ID of the element in which to draw the chart.
    element: 'donutEg',
    // Chart data records -- each entry in this array corresponds to a point on
    // the chart.
    data: [
        {label: "Positive", value: <?php echo $pos ?>},
        {label: "Negative", value: <?php echo $neg ?>},
        {label: "Pending", value: <?php echo $pend ?>},
        {label: "Contact Clinic", value: <?php echo $cont ?>},
        {label: "Unspecified", value: <?php echo $misc ?>}
    ]
});