使用 pablojim 的 highcharts ng 在带有 angular js 的 angular ui grid 中动态 highchart 配置 [英] dynamic highchart config in angular ui grid with angular js using pablojim's highcharts ng

问题描述

我的代码(在控制器上)创建一个有角度的 ui-grid -

function getData() {$scope.myData = [];$scope.columnDefs = [];$scope.gridOptions = {数据:'我的数据'，useExternalSorting: 真,columnDefs: 'columnDefs',};valuesService.getValues().success(function (data) {$scope.columnDefs = getColumnDefs(data.DataColumns);$scope.myData = data.Data;if (!$scope.$$phase) $scope.$apply();}).错误(函数(错误){$scope.status = '无法加载客户数据:' + error.message;});}函数 getColumnDefs(columns) {var columnDefs = new Array();for (var i = 0; i < columns.length; i++) {columnDefs.push({字段:列[i].名称，显示名称:列[i].标题，宽度:列[i].宽度，hasChart: columns[i].HasChart,cellTemplate: "ui-grid-cell-template.html"});}返回列定义；}

所以在我的控制器中，我调用了 getData() 函数，该函数将使用 gridOptions 填充网格并创建 columnDefs 数组

正如您在 columnDefs 中看到的，我在网格中使用 cellTemplate这就是我的 ui-grid-cell-template.html 的样子 -

//这有效<div class="ngCellText column-chart-style"><highchart id="chart2"config="{{getColumnChartConfig(col.colIndex())}}"></highchart>//这不起作用

所以我的网格显示数据列，其中一列有一个图表，它需要从控制器的 $scope 对象动态读取配置.这个动态图表配置对象将由控制器范围上的 getColumnChartConfig 方法提供，它的最简单形式看起来像这样 -

//这个函数没有被调用$scope.getColumnChartConfig = 函数(rowId){返回 someChartConfigObject；}

您能否让我知道这是否是完成我正在尝试的正确方法，如果是，那么为什么 getColumnChartConfig 方法没有从我的网格的 cellTemplate<中调用/代码>?有没有其他方法可以做到这一点?

提前致谢.

解决方案

不要使用带有 config 属性的插值 {{}} 指令并且你的内部 div 函数应该专门指向父级使用 ng-if，因为它从当前运行的范围创建新的子范围.所以你需要使用 $parent 关键字

明确指向父作用域

标记

<highchart id="chart2" config="$parent.getColumnChartConfig(col.colIndex())"></highchart>

my code (on the controller) to create an angular ui-grid -

function getData() {
    $scope.myData = [];
    $scope.columnDefs = [];
    $scope.gridOptions = {
         data: 'myData',
         useExternalSorting: true,
         columnDefs: 'columnDefs',
    };
    valuesService.getValues().success(function (data) {
        $scope.columnDefs = getColumnDefs(data.DataColumns);
        $scope.myData = data.Data;
        if (!$scope.$$phase) $scope.$apply();
    }).error(function (error) {
        $scope.status = 'Unable to load customer data: ' + error.message;
    });
}

function getColumnDefs(columns) {
   var columnDefs = new Array();
   for (var i = 0; i < columns.length; i++) {
       columnDefs.push({
          field: columns[i].Name,
          displayName: columns[i].Caption,
          width: columns[i].Width,
          hasChart: columns[i].HasChart,
          cellTemplate: "ui-grid-cell-template.html"
       });
    }

    return columnDefs;
}

So in my controller i call the getData() function which will populate the grid with the gridOptions and create columnDefs array

As you see in the columnDefs i am using cellTemplate in the grid And this is how my ui-grid-cell-template.html looks like -

<div ng-if="isChartColumn(col)"> //This works
    <div class="ngCellText column-chart-style">
        <highchart id="chart2" 
        config="{{getColumnChartConfig(col.colIndex())}}"></highchart>   //this does not work
    </div>
</div>

So my grid shows data columns and one of the column has a chart, which needs to read the config dynamically from controller's $scope object. This dynamic chart config object is to be supplied by getColumnChartConfig method on controller's scope which looks something like this in its simplest form -

//This function is not getting called
$scope.getColumnChartConfig = function (rowId) {
        return someChartConfigObject;
}

Can you please let me know whether this is the correct way to accomplish what i am trying to and if it is then why is the getColumnChartConfig method not getting called from my grid's cellTemplate? Is there any other approach to do this?

Thanks in advance.

解决方案

Don't use interpolation {{}} directive with config attribute And You inner div function should specifically point to the parent as you used ng-if, as it creates new child scope from current running scope. so you need to explicitly point to parent scope using $parent keyword

Markup

<highchart id="chart2" config="$parent.getColumnChartConfig(col.colIndex())">
</highchart>

这篇关于使用 pablojim 的 highcharts ng 在带有 angular js 的 angular ui grid 中动态 highchart 配置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！