Angularjs 具有多条水平线(边距)的角度图/折线图
我正在尝试创建一个有四条水平线(边距-两个上边距和两个下边距)的八角折线图。请看这把小提琴- 我的目标是在angular controller中定义这些线的属性(值、颜色、标签),而不是在JQuery折线图扩展中定义,就像目前在fiddle中所做的那样。图形属性以及边距线属性将来自后端,边距线将独立于图形绘制 我不知道如何在控制器中实现类似$scope.margins=[]的功能,类似于我们对$scope.data=[]或$scope.labels的功能。。。感谢您的帮助 这是HTML:Angularjs 具有多条水平线(边距)的角度图/折线图,angularjs,chart.js,angular-chart,Angularjs,Chart.js,Angular Chart,我正在尝试创建一个有四条水平线(边距-两个上边距和两个下边距)的八角折线图。请看这把小提琴- 我的目标是在angular controller中定义这些线的属性(值、颜色、标签),而不是在JQuery折线图扩展中定义,就像目前在fiddle中所做的那样。图形属性以及边距线属性将来自后端,边距线将独立于图形绘制 我不知道如何在控制器中实现类似$scope.margins=[]的功能,类似于我们对$scope.data=[]或$scope.labels的功能。。。感谢您的帮助 这是HTML:
<canvas id="line" class="chart chart-linebis" chart-data="data"
chart-labels="labels" chart-legend="true" chart-series="series"
chart-click="onClick">
</canvas>
angular.module('test', ['chart.js']);
angular.module('test').controller('TestCtrl', function ($scope) {
$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
$scope.series = ['Series A'];
$scope.data = [
[-5, 48, 40, -19, 86, 27, 90]
];
});
这是控制器:
<canvas id="line" class="chart chart-linebis" chart-data="data"
chart-labels="labels" chart-legend="true" chart-series="series"
chart-click="onClick">
</canvas>
angular.module('test', ['chart.js']);
angular.module('test').controller('TestCtrl', function ($scope) {
$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
$scope.series = ['Series A'];
$scope.data = [
[-5, 48, 40, -19, 86, 27, 90]
];
});
提到了以前的两个员额
和
我终于解决了这个问题,希望这能帮助其他可能有类似任务的人 $scope.options是角度控制器内的一个位置,从后端接收边距线的属性并将其指定给$scope.options(您可以用动态值替换每个水平线的当前硬编码标签、值和颜色) 然后,HTML中的canvas标记将添加以下选项:
chart-options="options"
最后,在折线图扩展代码中,在绘图功能中,“线”将通过选项桥接到“限制线”:
draw: function () {
Chart.types.Line.prototype.draw.apply(this, arguments);
var lines = this.options.limitLines;
它确实有效,非常感谢,你帮了我很多:)