如何在高级图表中显示无数据可用消息

时间:2017-02-17 11:21:17

标签: javascript highcharts no-data

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

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

7 个答案:

答案 0 :(得分:14)

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

默认消息为"无数据显示"。如果您想修改它,您可以这样做:

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

答案 1 :(得分:11)

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

});

答案 2 :(得分:7)

根据您的评论(如果我们的数据仍显示没有数据可用消息,那么,如果我们有数据,我们可以隐藏在高级图表中。)我认为您正在使用fustaki的解决方案并且不想要使用 no-data-to-display.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();
  }
});

Fiddle演示

答案 3 :(得分:4)

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

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>

希望这有助于某人

答案 4 :(得分:3)

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

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

答案 5 :(得分:2)

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

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

yourChartObject.showNoData('you new message')

答案 6 :(得分: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'
        }
    },
    .
    .
});