具有多条水平线（边距）的角度图/折线图-Java 学习之路

我正在尝试创建一个具有四条水平线（边距 - 两个上边距和两个下边距）的agular折线图 . 请看这个小提琴 - https://jsfiddle.net/CypressMountain/arq34fcu/30/

我的目标是在角度控制器内定义这些线的属性（值，颜色，标签），但不在JQuery折线图扩展内，因为它目前在小提琴中完成 . 图形属性以及边距线属性将来自后端，边距线将独立于图形绘制 .

我不知道如何在控制器中实现类似$ scope.margins = []的东西，类似于我们对$ scope.data = []或$ scope.labels的所有...感谢任何帮助 .

This is the 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)'
        }
    ]

.............................

This is the controller:

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]
];
});

前两篇文章被引用angular-chart add horizontal line和Chart.js - draw horizontal line

1 回答

我终于得到了解决，并希望这将有助于其他可能有类似任务的人 .

$ scope.options是角度控制器内部的位置，其中边缘线的属性将从后端接收并分配给$ 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;

回复于 2024-04-20T02:46:59+08:00

具有多条水平线（边距）的角度图/折线图

1 回答

相关问题