如何使用 highchart 在 yii 中添加实时更新图表答案

【问题标题】：how to add live updating charts in yii with highchart如何使用 highchart 在 yii 中添加实时更新图表
【发布时间】：2013-11-19 14:06:59
【问题描述】：

我正在使用 Yii 和 Activehighcharts 来显示图表。 http://www.yiiframework.com/extension/activehighcharts

控制器如下

    public function actionChartView(){
        $dataProvider=new CActiveDataProvider('ChartData',array(
            'criteria'=>array(
                'condition'=>'dID=2',
                'order'=>'time ASC',
                ),
            'pagination'=>array(
                'pageSize'=>50,
                ),
            )
        );
        $p=$dataProvider->pagination;
        $p->setItemCount($dataProvider->getTotalItemCount());
        $p->currentPage=$p->pageCount-1;
        if(isset($_GET['json']) && $_GET['json'] == 1){
            $count = ChartData::model()->count();
            for($i=1; $i<=$count; $i++){
                $data = ChartData::model()->findByPk($i);
                $data->data += rand(-10,10);
                $data->save();
            }
            echo CJSON::encode($dataProvider->getData());
        }
        else{
            $this->render('ChartView',array('dataProvider'=>$dataProvider,));
        }
}

查看方式

 $this->Widget('ext.ActiveHighcharts.HighchartsWidget', array(
    'dataProvider'=>$dataProvider,
    'template'=>'{items}',
    'id'=>'Temperature',
    'options'=> array(
        'title'=>array(
            'text'=>'Temperature'
        ),
        'chart'=>array(
            "zoomType"=>'x',
        ),
        'xAxis'=>array(
            'title' => array('text' => 'Time',),
            'categories' => 'time',
            'labels' => array(
                'rotation' => -90,
                'y'        => 20,
                ),
        ),
        'yAxis'=>array(
            'title' => array('text' => 'DegC'),
            ),
        'series'=>array(
            array(
                'type'=>'areaspline',
                'name'=>'Temperature',      //title of data
                'dataResource'=>'data',     //data resource according to datebase column
            )
        ),
    )
));

我需要使用 ajax 每 2 分钟更新一次图表。我还需要获取旧数据。

如何处理这些情况。

【问题讨论】：

标签： javascript php ajax yii highcharts

【解决方案1】：

在您的 ajax 调用成功回调中，使用 highcharts 文档中提供的 api 方法更新图表中的数据。

请参考这个link，它将帮助您找到一个好的解决方案。

【讨论】：

我完全不明白如何在模型/控制器和视图中添加这些东西。

【解决方案2】：

好的。为了最好地回答你的问题，我会尽量把事情弄清楚。

首先您需要创建一个视图（一个包含您的 highchart 代码的 php 文件）

其次，您需要编辑您的控制器（假设为 siteController）并创建一个操作来调用您刚刚创建的视图。在该操作中，您需要连接和查询数据库。

参见下面的示例代码：

siteController 操作：

public function actionAtencionesMensuales() {
$sql = Yii::app()->db->createCommand('
SELECT DISTINCT MONTH(hora) as mes, count(*) as total
FROM visitas
WHERE YEAR(hora)=YEAR(CURDATE())
GROUP BY MONTH(hora)')->queryAll();
$mes = array();
$total = array();
for ($i = 0; $i < sizeof($sql); $i++) {
$mes[] = $sql[$i]["mes"];
$total[] = (int) $sql[$i]["total"];
}
$this->render('my_view', array('mes' => $mes, 'total' => $total));
}
}

在视图中：

<?php
$this->Widget('ext.highcharts.HighchartsWidget', array(
'options' => array(
'exporting' => array('enabled' => true),
'title' => array('text' => 'Mes'),
'theme' => 'grid',
'rangeSelector' => array('selected' => 1),
'xAxis' => array(
'categories' => $mes
),
'yAxis' => array(
'title' => array('text' => 'Cantidad')
),
'series' => array(
array('name' => 'Total', 'data' => $total = array_map('intVal', $total)),
)
)
));
?>

图表系列内，调用变量时最好使用：

$total = array_map('intVal', $total)

不仅仅是：

$total

祝你好运:)

【讨论】：