AngularJS中具有内联变量的Highcharts(使用Pablojim's Highchart ng）

Highcharts in AngularJS with inline variables (using Pablojim's Highchart-ng)

本文关键字：Pablojim ng Highchart 使用 Highcharts 变量 AngularJS      更新时间：2023-10-11

我正在使用AngularJS的Highchart图表库，使用Pablojim的"Highchart ng"模块。

一切都设置正确，以下代码按预期工作：

<highchart config="{
    type    : 'line',
    series  : [{
        name    : 'Visitors', 
        data    : [1, 4, 10, 3]
    }]
}"></highchart>

但是

<highchart config="{
    type    : 'line',
    series  : [{
        name    : 'Visitors', 
        data    : {{visitors}}
    }]
}"></highchart>

没有。（注意"数据"处的差异）

我一直得到以下错误：

Error: [$parse:syntax] Syntax Error: Token 'visitors' is unexpected, expecting [:] at column 122 of the expression [{
    type    : 'line',
    series  : [{
        name    : 'Visitors', 
        data    : {{visitors}}
    }]
}] starting at [visitors}}
    }]
}].

注意：变量｛｛visiters｝｝在我的控制器中正确设置，当在我的模板中使用它时，数据运行良好。它也曾经使用我以前的图表库Flot

我已经尝试了多种解决方案：

  • 通常情况下，我可以通过在指令中添加ng-repeat="data in visitors | limitTo: 1"之类的内容来解决这个（初始化）问题，因此它只有在变量可用时才初始化（这适用于Flot和EasyPieCharts）
  • 添加CCD_ 2不起作用
  • CCD_ 3也不起作用

那么，如何在模板文件中内联添加变量

您可以尝试使用：

<highchart config="{
    type    : 'line',
    series  : [{
        name    : 'Visitors', 
        data    : visitors
    }]
}"></highchart>

像var

或

在您的ng-controller 中

$scope.config = { 
    options: { 
        chart: { type: 'bar' } 
    }, 
    series: [{ 
        data: visitors 
    }], 
    title: { text: 'Hello' }, 
    loading: false }

然后在你的html 中

<highchart config="config"></highchart>
相关文章：