如何在高图中显示无数据可用消息
How to show No Data Available Message in highcharts
我们可以使用 highcharts.When 数据不可用来显示消息吗?我们必须显示一条消息示例:No Data Available
。如果我们有数据隐藏:No Data Available
消息。在 highcharts 动态
Highcharts.chart('container', {
chart: {
type: 'bubble',
plotBorderWidth: 0,
zoomType: 'xy'
},
});
您可以使用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();
});
在您的页面中包含 no-data-to-display.js 文件。它与 highcharts 捆绑在一起。否则你可以在这里得到它:https://code.highcharts.com/modules/no-data-to-display.js
默认消息是"No data to display"。如果你想修改它,你可以这样做:
Highcharts.setOptions({
lang: {
noData: 'Personalized no data message'
}
});
根据您的评论(如果我们有数据仍然显示没有数据可用的消息,那么如果我们有数据我们可以隐藏在 highcharts 中吗)。我认为您正在使用 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 演示
其中一些其他答案看起来有点疯狂...这是我想分享的超级基本解决方案:
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>
希望这对某人有所帮助
对我来说,最新版本是这样的:
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),您可以在创建图表对象时显示 'no data' 消息,正如 Patrik 所说,通过设置lang.noData 选项。
为了能够在创建图表后更改此消息,您需要调用方法
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'
}
},
.
.
});
然后在系列之后你应该添加:
lang: {
noData: 'Nessun dato presente'
},
noData: {
style: {
fontWeight: 'bold',
fontSize: '15px',
color: '#303030'
}
},
它会工作得很好
我们可以使用 highcharts.When 数据不可用来显示消息吗?我们必须显示一条消息示例:No Data Available
。如果我们有数据隐藏:No Data Available
消息。在 highcharts 动态
Highcharts.chart('container', {
chart: {
type: 'bubble',
plotBorderWidth: 0,
zoomType: 'xy'
},
});
您可以使用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();
});
在您的页面中包含 no-data-to-display.js 文件。它与 highcharts 捆绑在一起。否则你可以在这里得到它:https://code.highcharts.com/modules/no-data-to-display.js
默认消息是"No data to display"。如果你想修改它,你可以这样做:
Highcharts.setOptions({
lang: {
noData: 'Personalized no data message'
}
});
根据您的评论(如果我们有数据仍然显示没有数据可用的消息,那么如果我们有数据我们可以隐藏在 highcharts 中吗)。我认为您正在使用 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 演示
其中一些其他答案看起来有点疯狂...这是我想分享的超级基本解决方案:
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>
希望这对某人有所帮助
对我来说,最新版本是这样的:
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),您可以在创建图表对象时显示 'no data' 消息,正如 Patrik 所说,通过设置lang.noData 选项。
为了能够在创建图表后更改此消息,您需要调用方法
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'
}
},
.
.
});
然后在系列之后你应该添加:
lang: {
noData: 'Nessun dato presente'
},
noData: {
style: {
fontWeight: 'bold',
fontSize: '15px',
color: '#303030'
}
},
它会工作得很好