2

4 つの水平線 (余白 - 2 つの上部余白と 2 つの下部余白) を持つ agular 折れ線グラフを作成しようとしています。このフィドルを参照してください - https://jsfiddle.net/CypressMountain/arq34fcu/30/

私の目的は、現在フィドルで行われているように、これらの線のプロパティ (値、色、ラベル) を角度コントローラー内で定義することですが、JQuery 折れ線グラフ拡張内では定義しません。グラフのプロパティとマージン ラインのプロパティはバックエンドから取得され、マージン ラインはグラフとは別に描画されます。

$scope.data = [] または $scope.labels の場合と同様に、コントローラーで $scope.margins = [] のようなものを達成する方法がわかりません...どんな助けも大歓迎です。

これは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 関数で定義されるようになりました

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

以前の 2 つの投稿が参照されました angular-chart add horizo​​ntal line および Chart.js - draw horizo​​ntal line

4

1 に答える 1

3

私は最終的にそれを解決しました。これが同様のタスクを持っている可能性のある他の誰かに役立つことを願っています.

$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;
于 2016-05-27T02:01:38.963 に答える