22

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

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

8 回答 8

18

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

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

Highcharts.setOptions({
    lang: {
        noData: 'Personalized no data message'
    }
});
于 2017-02-17T11:43:22.243 回答
15

您可以使用Highcharts 图表渲染器

这是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();

});
于 2017-02-17T11:31:58.660 回答
11

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

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>

希望这可以帮助某人

于 2018-01-22T15:42:55.953 回答
8

根据您的评论（如果我们的数据仍然显示没有数据可用消息，那么如果我们有数据，我们可以隐藏在高图表中）。我认为您正在使用 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();
  }
});

小提琴演示

于 2017-08-17T18:38:46.637 回答
4

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

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'
  }
});
于 2019-08-13T06:34:24.273 回答
2

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

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

yourChartObject.showNoData('you new message')
于 2019-08-14T03:07:24.517 回答
0 
<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'
        }
    },
    .
    .
});
于 2020-07-31T06:35:47.813 回答
0

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

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

它会工作得很好

于 2022-01-10T09:43:17.057 回答