Highcharts、Yii 和正文内容重新加载

Question

我有一个在 CListView 和 Highcharts 图形中呈现一些数据的视图。

请注意CListView 的寻呼机的工作方式如下：它向服务器请求“新页面”，服务器呈现页面的全部内容并将其发送到CListView。然后将正文替换为正在发送的内容，如下所示：$('body').html(rendered_html_response)。

我也有一个模仿这种行为的dropDownList。这是代码：

<?php
    echo CHtml::dropDownList('usage', 'cg', array(
        'd'=>'Daily',
        'm'=>'Monhly'
    ), array(
        'ajax'=>array(
            'type'=>'POST',
            'url'=>$this->createUrl('admin/user', array(
                'id'=>$user->id)
            ),
            'update'=>'body',
            'data'=>array('cg'=>'js:$(this).val()'), 
            'options'=>array(
                Yii::app()->session['cg']=>array(
                    'selected'=>true
                )
            )
        )
    ));
?>

总之，有问题。当我使用CListView 时，一切正常（例如：刷新页面内容而不重新加载页面，图表和数据正确呈现等...），但是当我使用@987654328 选择某些内容时@，服务器渲染回复，发送给客户端，客户端开始替换body的内容，但是我得到这个错误：http://www.highcharts.com/errors/16。

我尝试以这种方式禁用highcharts.src.js：

public function beforeAction(){
    if(Yii::app()->request->isAjaxRequest){
        Yii::app()->clientScript->scriptMap['highcharts.src.js'] = false;
    }
    return true;
}

然后我得到典型的undefined javascript 错误（意味着 something 正在尝试使用未定义的Highcharts）。

问题出在哪里，我该如何解决？

Answer 1

//init
$('#container').highcharts({});
//select onchange
$('#container').highcharts().destroy();

Answer 2

按照错误链接所述

页面中已经定义了Highcharts

此错误在第二次在同一页面中加载 Highcharts 或 Highstock 时发生，因此已经定义了 Highcharts 命名空间。请记住，Highcharts.Chart 的构造函数和 Highcharts 的所有功能都包含在 Highstock 中，因此如果您将 Chart 和 StockChart 组合运行，则只需加载 highstock.js 文件即可。

您正在加载 highcharts javascript 两次。你可以试试

a) 在第一次加载时启用 highcharts，然后在下一次加载时禁用它，例如检查是否 ajax

b) 使用自定义 javascript 检查是否已加载 highcharts，如 this blog post

c) 使用 NLSClientScript extension 为您处理 js 和 css 加载

我建议你使用最后一个。我被这个问题咬了几次，直到我发现它。它消除了单独列出每个 javascript 函数/文件的需要。

编辑

您可以编辑代码以使用相同的 update 函数，而不是编辑 listview js：

<?php
    echo CHtml::dropDownList('usage', 'cg', array(
        'd'=>'Daily',
        'm'=>'Monhly'
    ), array(
        'onChange'=>'$.fn.yiiListView.update("your-list-id", {
            data: {"usage":$(this).val()},
            type: "POST"
        });'
    ));
?>