Question

我使用angular-chartjs创建了一个折线图。当我没有任何数据显示空白图表时。我需要显示一条消息＆＃34;没有要显示的数据＆＃34;。让我知道如何做到这一点。

代码： js code

$scope.linesOption = {
        chart: {
            type: 'lineChart',
            height: 250,
            margin: {
                top: 20,
                right: 20,
                bottom: 40,
                left: 55
            },
            reduceXTicks: false,
            x: function (d) {
                return d.date;
                //return d3.time.format()(d.date);
            },
            y: function (d) {
                return d.value;
            },
            duration: 100,
            xAxis: {
                axisLabel: 'Date',
                ticks: d3.time.days,
                tickFormat: function (d) {
                    return d3.time.format("%A")(new Date(d));
                }
            },
            yAxis: {
                axisLabel: 'deliveries',
                axisLabelDistance: -10
            },
            showLegend: false
        },
        title: {
            enable: true,
            text: 'No of Delivery',
            css: {
                'text-align': 'left',
                'font-size': '14px',
                'margin-left': '20px'
            }
        }
    };

    $scope.linesData = [];
    $scope.linesLabels = ["Mon", "Tue", "Wed", "Thr", "Fri" , "Sat", "Sun"];

HTML代码

<div class="panel panel-ocean" style="margin: 2% 1.5%;">
                        <div class="panel-heading"><b>Delivery</b></div>
                        <div class="panel-body">
                            <canvas id="delivery-chart" class="chart chart-line" chart-data="linesData" chart-labels="linesLabels"
                                    chart-options="lineOptions"
                                    chart-colors="['#BD762A']" width="480" height="250"
                                    chart-dataset-override="datasetOverride">
                            </canvas>
                        </div>
                    </div>

我需要在空白处写一条消息说＆＃34;没有要显示的数据。＆＃34;

谢谢，沙

Answer 1

以下是plunkr：

https://plnkr.co/edit/vWZwfehDNhv6Q3YBZL7m?p=preview

您可以通过更改css top＆amp; amp;来设置文本'无数据可用'。右。

 <canvas id="line" ng-show="isDataAvaiable" class="chart chart-line" chart-data="plot.data" chart-labels="plot.labels" chart-legend="true" chart-colors="plot.color" chart-series="plot.series" chart-options="plot.options" chart-click="plot.callback()" height="250"></canvas>
<b class="no-data-available" ng-hide="isDataAvaiable">No Data Available</b>

这是css：

.no-data-available {
  position: absolute;
  top: 49%;
  right: 45%;
}

显示＆＃34;没有数据＆＃34;在angular-chartjs折线图中

1 个答案: