1

我正在尝试在我们的一个应用程序中使用 ChartJS2 创建一个图表；我们使用 AngularJS 1.x 和 RequireJS。所以为此我们使用了 ChartJs 2.7.0

当我尝试实现我们的要求时，我遇到了一个异常问题

  1. 当我将 x 轴类型定义为线性时，注释（垂直线）不会显示在图表上，如附图所示：当类型：'linear'
  2. 当我将线轴（X）类型注释为线性时，仅显示注释（垂直线），但图形根本不显示，如附图所示：注释线类型时：“线性”

我的 HTML 代码如下：

<canvas style='height: 350px; width: 400px;' id="line" class="chart chart-line" chart-data="ourFixData.data"
    chart-labels="ourFixData.labels" chart-series="ourFixData.series" chart-options="ourFixData.options" chart-colors="ourFixData.colors"
    chart-dataset-override="ourFixData.datasetOverride"></canvas>

我的控制器代码如下：

'use strict';

define(['app'], function (app) {
    app.register.controller("demoCtrl", function ($scope) {
        $scope.data = [];

        $scope.ourFixData = {};

        $scope.ourFixData.lineAtPoint = 2.20;

        $scope.ourFixData.colors = ['#399c5f', '#399c5f', '#399c5f'];
        $scope.ourFixData.labels = [0, 0.5, 1.5, 2.5, 5, 7.5, 12.5, 17.5, 27.5];
        $scope.ourFixData.series = ['Invites Available'];

        var dashArr = [,,,,4,5,6,7,8];
        var mainArr = [0,1,2,3,4,,,,];
        $scope.ourFixData.data = [
            dashArr,
            mainArr
        ];

        $scope.ourFixData.onClick = function (points, evt) {
            console.log(points, evt);
        };

        $scope.ourFixData.datasetOverride = [
            {
                data: dashArr,
                borderColor: '#399c5f',
                borderDash: [2,4],
                borderWidth: 2,
                pointBackgroundColor : '#399c5f',
                fill: false
            }, {
                data: mainArr,
                borderColor: '#399c5f',
                borderWidth: 2,
                pointBackgroundColor : '#399c5f',
                fill: false
            }
        ];

        $scope.ourFixData.options = {
            title: {
                fontFamily: "Open Sans",
                text: "Invite Graph"
            },
            scales: {
                xAxes: [
                    {
                        id: 'x-axis-0',
                        display: true,

                        // ***** This is where I'm facing issues
                        type: 'linear', // When commented annotation doesn't get displayed

                        position: 'bottom',
                        scaleLabel: {
                            fontFamily: "Open Sans",
                            display: true,
                            labelString: 'Turn-Over in Lakh Rupees'
                        }
                    }
                ],
                yAxes: [
                    {
                        id: 'y-axis-0',
                        display: true,
                        position: 'left',
                        scaleLabel: {
                            fontFamily: "Open Sans",
                            display: true,
                            labelString: 'Invites Available'
                        }
                    }
                ]
            },
            annotation: {
                drawTime: 'afterDatasetsDraw',
                annotations: [
                    {
                        type: 'line',
                        id: 'hline',
                        mode: 'vertical',
                        scaleID: 'x-axis-0',
                        value: $scope.ourFixData.lineAtPoint, // data-value at which the line is drawn
                        borderWidth: 1,
                        borderColor: 'blue',
                        borderDash: [4,5],
                        display: true,
                        title: "Current",
                        enabled: true,
                        label: {
                            fontFamily: "Open Sans",
                            backgroundColor: "blue",
                            content: $scope.ourFixData.lineAtPoint + " Lacks",
                            enabled: true,
                            position: 'top'
                        }
                    }
                ]
            }
        };
    });
});

任何形式的帮助将不胜感激。提前致谢。

4

0 回答 0