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

当数据不可用时，我们可以使用highcharts显示消息吗？我们必须显示一个消息示例：

无可用数据

。如果我们有数据隐藏：

无可用数据

消息。动态地在海图中

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

你可以用

这里有一个例子

---

在页面中包含no-data-to-display.js文件。它与海图捆绑在一起。您可以在此处获取，否则：

默认消息为“无数据显示”。如果要修改它，可以执行以下操作：

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

根据您的评论（如果我们的数据仍然显示没有数据可用的消息，那么如果我们有数据，我们可以隐藏在highcharts中）。我认为您正在使用fustaki的解决方案，不想使用无数据显示.js模块。是的，如前所述存在问题。您仍然可以通过修改代码来使用相同的代码，即在继续函数中添加条件，以根据此呈现消息检查序列是否为空

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

var图表=新的Highcharts.图表({
图表：{
renderTo:“容器”
},
xAxis：{
类别：[一月、二月、三月、四月、五月、六月、七月、八月、九月、十月、十一月、十二月]
},
系列：[]
}，函数（图表）{//已完成
如果（chart.series.length<1）{//检查序列是否为空
chart.renderer.text（'无可用数据'，140，120）
.css({
颜色：“#4572A7”，
字体大小：“16px”
})
.add（）；
}
});

---

演示

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

Highcharts.setOptions（{lang:{noData:“您的自定义消息”}）
var chart=Highcharts.chart（'容器'{
系列：[{
数据：[]
}]
});
对于最新版本的我，它的工作原理如下：

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

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

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

yourChartObject.showNoData('you new message')


Highcharts.chart（'容器'{
朗：{
noData：“未找到任何数据”
},
野田：{
风格：{
fontWeight:'粗体'，
字体大小：“15px”
}
},
.
.
});
嗯，是的。只是不要创建highchart并插入“无可用数据”的文本。在没有任何代码的情况下，这是您可能得到的最大帮助。参见示例…我们可以增加字体大小，并且我们需要不添加任何数据来显示js吗file@Kondal我可以从现有答案中知道您需要什么额外的细节吗？请从文档中检查。这个示例运行良好，经过测试。添加你失败的例子和你的文章的不同之处。看起来很疯狂链接断开了。该文本如何居中对齐？我们可以自定义此消息，如更改颜色等吗？对我来说，它不起作用，图表为空，消息也不显示
yourChartObject.showNoData('you new message')

<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'
        }
    },
    .
    .
});