在 angular-chartjs 折线图中显示“无数据”答案

【问题标题】：Show "No data" in angular-chartjs line graph在 angular-chartjs 折线图中显示“无数据”
【发布时间】：2017-08-18 16:42:27
【问题描述】：

我使用 angular-chartjs 创建了一个折线图。当我没有任何数据时，它会显示空白图表。我需要显示一条消息“没有要显示的数据”。让我知道该怎么做。

代码： js代码

$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>

我需要在空白区域中间显示“没有数据可显示”的消息。

谢谢，桑迪

【问题讨论】：

在<canvas></canvas> 旁边添加一个div，例如<div style="position: absolute; top: 100px; right: 240px;">No data to show</div>。调整位置。 I create a plunk to show how it works
难道我们没有任何适当的方法可以做到这一点吗？就像在选项中添加一些配置以在没有数据时显示消息。
它是一个画布 html，您只能以编程方式进行。 Check this SO link，答案似乎是这样做的，但不是针对 Angular。不过，它看起来有点骇人听闻。
正在尝试实现这一点，但无法弄清楚如何将 fillText 放入linesOptions ..
Check this updated plunkr，这就是你想要的。我使用 jquery 来获取画布上下文，你可以用它做你想做的事情。如果你想使用 angular.element 而不是 jquery，你也可以这样做。

标签： angularjs charts chart.js

【解决方案1】：

这里是plunkr：

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

您可以通过更改 css 顶部和右侧来设置文本“无可用数据”。

 <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%;
}

【讨论】：