javascript - 带有内联变量的 AngularJS 中的 Highcharts（使用 Pablojim 的 Highchart-ng）

Question

我正在使用带有 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}}
    }]
}].

注意：变量 {{visitors}} 在我的控制器中正确设置，在我的模板中使用它时，数据工作正常。它还可以与我以前的图表库 Flot 一起使用。

我尝试了多种解决方法：

• 通常我可以通过在指令中添加类似的东西来解决这个（初始化）问题ng-repeat="data in visitors | limitTo: 1"，所以它只在变量可用时才初始化（这适用于 Flot 和 EasyPieCharts）。
• 添加ui-refresh="visitors"不起作用，
• 也data: {{visitors || 0}}不起作用。

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

Answer 1

您可以尝试：

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

像一个变量

---

或者

---

在你的ng-controller

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

然后在你的 html

<highchart config="config"></highchart>