Angular-带有多条水平线(边距)的图表/折线图
Angular-chart / line chart with multiple horizontal lines (margins)
我正在尝试创建一个有四条水平线(边距 - 两个上边距和两个下边距)的 agular 折线图。请看这个 fiddle - https://jsfiddle.net/CypressMountain/arq34fcu/30/
我的 objective 是在 angular 控制器中定义这些线的属性(值、颜色、标签),而不是在 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>
当扩展折线图类型时,边缘线现在在绘图函数中定义
draw: function () {
Chart.types.Line.prototype.draw.apply(this, arguments);
var lines =
[
{
label: 'Upper margin 1',
value: 90,
color: 'rgba(255, 0, 0, .9)'
},
{
label: 'Upper margin 2',
value: 75,
color: 'rgba(255, 165, 0, .8)'
},
{
label: 'Lower margin 1',
value: -10,
color: 'rgba(0, 165, 255, .8)'
},
{
label: 'Lower margin 2',
value: -25,
color: 'rgba(0, 0, 255, .8)'
}
]
.............................
这是控制器:
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 是 angular 控制器内部的地方,从后端接收边距线的属性并将其分配给 $scope.options (您将替换当前的具有动态值的每条水平线的硬编码标签、值和颜色)。
$scope.options = {
limitLines: [
{
label: 'Upper margin 1',
value: 90,
color: 'rgba(255, 0, 0, .9)'
},
{
label: 'Upper margin 2',
value: 75,
color: 'rgba(255, 165, 0, .8)'
},
{
label: 'Lower margin 1',
value: -10,
color: 'rgba(0, 165, 255, .8)'
},
{
label: 'Lower margin 2',
value: -25,
color: 'rgba(0, 0, 255, .8)'
}
]
}
那么 HTML 中的 canvas 标签将添加以下选项:
chart-options="options"
最后,在折线图扩展代码中,绘图函数中的 'lines' 将通过选项桥接到 'limitLines':
draw: function () {
Chart.types.Line.prototype.draw.apply(this, arguments);
var lines = this.options.limitLines;
我正在尝试创建一个有四条水平线(边距 - 两个上边距和两个下边距)的 agular 折线图。请看这个 fiddle - https://jsfiddle.net/CypressMountain/arq34fcu/30/
我的 objective 是在 angular 控制器中定义这些线的属性(值、颜色、标签),而不是在 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>
当扩展折线图类型时,边缘线现在在绘图函数中定义
draw: function () {
Chart.types.Line.prototype.draw.apply(this, arguments);
var lines =
[
{
label: 'Upper margin 1',
value: 90,
color: 'rgba(255, 0, 0, .9)'
},
{
label: 'Upper margin 2',
value: 75,
color: 'rgba(255, 165, 0, .8)'
},
{
label: 'Lower margin 1',
value: -10,
color: 'rgba(0, 165, 255, .8)'
},
{
label: 'Lower margin 2',
value: -25,
color: 'rgba(0, 0, 255, .8)'
}
]
.............................
这是控制器:
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 是 angular 控制器内部的地方,从后端接收边距线的属性并将其分配给 $scope.options (您将替换当前的具有动态值的每条水平线的硬编码标签、值和颜色)。
$scope.options = {
limitLines: [
{
label: 'Upper margin 1',
value: 90,
color: 'rgba(255, 0, 0, .9)'
},
{
label: 'Upper margin 2',
value: 75,
color: 'rgba(255, 165, 0, .8)'
},
{
label: 'Lower margin 1',
value: -10,
color: 'rgba(0, 165, 255, .8)'
},
{
label: 'Lower margin 2',
value: -25,
color: 'rgba(0, 0, 255, .8)'
}
]
}
那么 HTML 中的 canvas 标签将添加以下选项:
chart-options="options"
最后,在折线图扩展代码中,绘图函数中的 'lines' 将通过选项桥接到 'limitLines':
draw: function () {
Chart.types.Line.prototype.draw.apply(this, arguments);
var lines = this.options.limitLines;