如何在 highcharts 中显示无可用数据消息答案

【问题标题】：How to show No Data Available Message in highcharts如何在 highcharts 中显示无可用数据消息
【发布时间】：2017-07-06 21:41:58
【问题描述】：

我们可以使用 highcharts 显示消息吗？当数据不可用时？我们必须显示一条消息示例：No Data Available。如果我们有数据隐藏：No Data Available 消息。在highcharts中动态

  Highcharts.chart('container', {
  chart: {
     type: 'bubble',
     plotBorderWidth: 0,
     zoomType: 'xy'
   },
});

【问题讨论】：

嗯，是的。只是不要创建高图表并插入“无可用数据”的文本。无需任何代码，这是您可能获得的最大帮助。
查看示例...jsfiddle.net/gh/get/jquery/2/highcharts/highcharts/tree/master/…
我们可以增加字体大小，我们需要必须添加 no-data-to-display-js 文件
@Kondal 我可以从现有答案中知道您需要哪些额外的详细信息。
从文档中检查这个noData。这个例子工作正常并且经过测试。添加失败的示例

标签： javascript highcharts no-data

【解决方案1】：

在您的页面中包含 no-data-to-display.js 文件。它与 highcharts 捆绑在一起。否则你可以在这里得到它：https://code.highcharts.com/modules/no-data-to-display.js

默认消息是“无数据显示”。如果你想修改它，你可以这样做：

Highcharts.setOptions({
    lang: {
        noData: 'Personalized no data message'
    }
});

【讨论】：

我们可以自定义这条消息吗，比如改变颜色等？
对我来说它不起作用，图表是空的，消息也不显示

【解决方案2】：

您可以使用Highcharts Chart Renderer

这是JSFiddle中的一个例子

var chart = new Highcharts.Chart({

    chart: {
        renderTo: 'container'
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: []

}, function(chart) { // on complete

    chart.renderer.text('No Data Available', 140, 120)
        .css({
            color: '#4572A7',
            fontSize: '16px'
        })
        .add();

});

【讨论】：

链接已损坏。
文本如何居中对齐？

【解决方案3】：

其中一些其他答案似乎有点疯狂......这是我想分享的一个超级基本解决方案：

Highcharts.setOptions({lang: {noData: "Your custom message"}})
var chart = Highcharts.chart('container', {
    series: [{
        data: []
    }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/no-data-to-display.js"></script>

<div id="container" style="height: 250px"></div>

希望这对某人有所帮助

【讨论】：

除了你的帖子与stackoverflow.com/a/42297065/8632727的不同之处。看起来很疯狂

【解决方案4】：

根据您的评论（如果我们有数据仍然显示没有可用的数据消息，那么如果我们有数据，我们可以隐藏在 highcharts 中）。我认为您正在使用 fustaki 的解决方案并且不想要使用 no-data-to-display.js 模块。是的，如上所述存在问题。您仍然可以通过修改它来使用相同的代码，即根据此渲染消息在 continue 函数中添加条件以检查系列是否为空。

var chart = new Highcharts.Chart({

chart: {
    renderTo: 'container'
  },

  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },

  series: []

}, function(chart) { // on complete
  if (chart.series.length < 1) { // check series is empty
    chart.renderer.text('No Data Available', 140, 120)
      .css({
        color: '#4572A7',
        fontSize: '16px'
      })
      .add();
  }
});

Fiddle演示

【讨论】：

【解决方案5】：

对我来说最新版本是这样的：

const Highcharts = require('highcharts');

import NoDataToDisplay from 'highcharts/modules/no-data-to-display';
NoDataToDisplay(Highcharts);

Highcharts.setOptions({
  lang: {
    noData: 'No data is available in the chart'
  }
});

【讨论】：

【解决方案6】：

使用当前版本 (v7.1.2) 和连接的无数据显示模块 (v7.1.2)，您可以在创建图表对象时显示“无数据”消息，正如 Patrik 通过设置 lang.noData 所说选项。

要在图表创建后更改此消息，您需要调用方法

yourChartObject.showNoData('you new message')

【讨论】：

【解决方案7】：

<script src="https://code.highcharts.com/modules/no-data-to-display.js"></script>

Highcharts.chart('container', {
    lang: {
        noData: "No data found"
    },
    noData: {
        style: {
            fontWeight: 'bold',
            fontSize: '15px'
        }
    },
    .
    .
});

【讨论】：

【解决方案8】：

然后你应该在系列之后添加：

 lang: {
    noData: 'Nessun dato presente'
 },
 noData: {
    style: {
         fontWeight: 'bold',
         fontSize: '15px',
         color: '#303030'
     }
},

它会正常工作

【讨论】：