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

ou6hu8tu  于 2022-11-11  发布在  Highcharts
关注(0)|答案(8)|浏览(414)

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

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

dhxwm5r41#

在你的页面中包含no-data-to-display.js文件。它与highcharts捆绑在一起。你可以在其他地方获得它:https://code.highcharts.com/modules/no-data-to-display.js
默认消息为“没有要显示的数据”。如果要修改它,可以执行以下操作:

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

fcy6dtqo2#

您可以使用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();

});
c0vxltue

c0vxltue3#

有些答案看起来有点疯狂......这里有一个超级基本的解决方案,我想与大家分享:
第一个
希望这对某人有帮助

elcex8rz

elcex8rz4#

根据您的评论(* 如果我们有数据仍然显示没有数据可用的消息,所以,我们可以隐藏在highcharts,如果我们有数据 *)。我认为你正在使用fustaki的解决方案,不想使用no-data-to-display.js模块。是的,有提到的问题。你仍然可以使用相同的代码,通过修改它,即添加条件内的continuing函数,以检查是否系列是空的,基于该呈现消息。

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演示

vs3odd8k

vs3odd8k5#

对于我来说,最新版本的工作原理如下:

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

exdqitrt6#

使用当前版本(v7.1.2)和连接的无数据显示模块(v7.1.2),您可以在创建一个图表对象时显示“无数据”消息,如Patrik所说,通过设置lang.noData选项。
若要在创建图表后更改此消息,您需要调用

yourChartObject.showNoData('you new message')
13z8s7eq

13z8s7eq7#

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

eoxn13cs8#

然后在系列后面加上:

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

它会很好地工作

相关问题