Highchart没有显示“没有要显示的数据”。信息 [英] Highchart does not show "no data to display" message

查看：69 发布时间：2019/6/11 3:14:03 HighCharts

本文介绍了Highchart没有显示“没有要显示的数据”。信息的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

大家好

我在网络应用程序中实现了一个高图。如果有数据，它可以正常工作。但如果没有数据则不会显示无数据可用的消息

有人请帮助我。

我的代码返回以下值

Hi All

I have implemented a highchart in my web applicaton. It works fine if there is data. But if there is no data it does not show the message "No data available"

anyone please help me.

My code returns below value

    $(function () { 
Highcharts.theme = {
colors: ['#cc0000','#38B6AB','#ff8000','#27ae60','#bf9393','#2c3e50','#7f8c8d','#2980b9','#6a5a8c','#e74c3c'],
chart: {
backgroundColor: {
linearGradient: [0, 0, 0, 0],
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(240, 240, 255)']
]
},
},
title: {
style: {
color: '#000',
font: 'bold 16px "Arial","Arial","Arial"'
}
},
subtitle: {
style: {
color: '#666',
font: 'bold 12px "Arial","Arial","Arial"'
}
},
 legend: {
 itemStyle: {
font: '8pt "Arial","Arial","Arial"',
color: 'black'
},
itemHoverStyle:{
color: 'gray'
}   
}
};
Highcharts.setOptions(Highcharts.theme);       var chart; 
       $(document).ready(function() { 
            chart = new Highcharts.Chart({ 
                chart: { 
                    renderTo: 'c2449f32-a781-4a11-84e4-9eefa7b513bf',plotBackgroundColor: null,plotBorderWidth: null,plotShadow: false,type: 'pie' 
                }, 
                title: { 
                    text:'', align: 'center', x: 0 
                }, 
                subtitle: { 
                    text: '' 
                }, 
                tooltip: { 
                    formatter: function() {return '<b>'+ this.point.name +'</b>: '+ Math.round(this.percentage) +'%';} 
                }, 
                plotOptions: { 
                    pie: {allowPointSelect: true,cursor: 'pointer',dataLabels: {enabled: true,format: '{point.percentage:.1f}%',color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'black',  style: { textShadow: 'none' } },  showInLegend: true,borderWidth: 0} 
                }, 
                xAxis: { 
                     
                }, 
                yAxis: [{ 
                     
                }], 
                credits: { 
                    enabled: false                }, 
                exporting: { 
                    enabled: true                }, 
                series: [ 
                    {type: 'pie',name: 'Revenue',data: ]} 
                ] 
            }); 
       }); 
    });

<div id="c2449f32-a781-4a11-84e4-9eefa7b513bf" style="min-width: 17%; height: 300px; margin: _MARGIN_ auto"></div>

我的尝试：

< pre lang =JavaScript> $（function（）{

Highcharts.theme = {

颜色：[&＃39;＃cc0000&＃39;，&＃39;＃38B6AB& ＃39;，&安培;＃39;＃ff8000&安培;＃39;，&安培;＃39;＃27ae60&安培;＃39;，&安培;＃39;＃bf9393&安培;＃39;，&安培;＃39;＃2c3e50&安培;＃39 ;，&安培;＃39;＃7f8c8d&安培;＃39;，&安培;＃39;＃2980b9&安培;＃39;，&安培;＃39;＃6a5a8c&安培;＃39;，&安培;＃39;＃e74c3c&安培;＃39;] ，

图表：{

backgroundColor：{

linearGradient：[0,0,0,0]，

停止：[

[0，&＃39; rgb（255,255,255）&＃39;]，

[1，&＃39 ; rgb（240,240,255）&＃39;]

]

}，

}，

title：{

style：{

color：&＃39;＃000&＃39;，

font：& ＃39;粗体16px& quot; Arial& quot;，& quot; Arial& quot;，& quot; Arial& quot;&＃39;

}

}，

副标题：{

风格：{

颜色：&＃39;＃666&＃39;，

字体：&＃39;粗体12px& quot; Arial& quot;，& quot; Arial& quot;，& Arial& quot;&＃39;

}

}，

传奇：{

itemStyle ：{

font：&＃39; 8pt& quot; Arial& quot;，& quot; Arial& quot;，& quot; Arial& quot;&＃39;，

颜色：&＃39;黑&＃39;

}，

itemHoverStyle：{

颜色：&＃39; grey&＃39;

}

}

};

Highcharts.setOptions （Highcharts.theme）; var chart;

$（document）.ready（function（）{

chart = new Highcharts.Chart（{

chart：{

renderTo：&＃39; c2449f32-a781-4a11-84e4-9eefa7b513bf&＃39;，plotBackgroundColor：null，plotBorderWidth：null，plotShadow：false，type：&＃39; pie&＃39; < br $>
}，

标题：{

text：&＃39;&＃39;，align：&＃39; center& ＃39;，x：0

}，

副标题：{

text：&＃39;&＃39;

}，

工具提示：{

格式化程序：function（）{return&＃39;& lt; b& gt;&＃ 39; + this.point.name +&＃39;& lt; / b& gt;：&＃39; + Math.round（this.percentage）+&＃39;％&＃39; ;}

}，

plotOptions：{

pie：{allowPointSelect：true，cursor：&＃39; pointer&＃39;，dataLabels：{enabled：true，format：&＃39; {point.percentage：.1f}％&＃39;，color :( Highcharts.theme& amp; amp; amp; amp; Highcharts.theme.dataLabelsColor）|| &＃39; black&＃39;，style：{textShadow：&＃39; none&＃39; ，showInLegend：true，borderWidth：0}

}，

xAxis：{

}，

yAxis：[{

}]，

学分：{

启用：false}，

导出：{

启用：true}，

系列：[

{type ：&＃39; pie&＃39;，名称：&＃39;收入&＃39;，数据：]}

]

}）;

}）;

}）; < / pre>

< pre lang =HTML>& lt; div id =& quot; c2449f32-a781-4a11-84e4-9eefa7b513bf& quot; style =& quot; min-width：17％;身高：300px;保证金：_MARGIN_ auto& quot;& gt;& lt; / div& gt;< / pre>

What I have tried:

<pre lang="JavaScript"> $(function () {
Highcharts.theme = {
colors: ['#cc0000','#38B6AB','#ff8000','#27ae60','#bf9393','#2c3e50','#7f8c8d','#2980b9','#6a5a8c','#e74c3c'],
chart: {
backgroundColor: {
linearGradient: [0, 0, 0, 0],
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(240, 240, 255)']
]
},
},
title: {
style: {
color: '#000',
font: 'bold 16px "Arial","Arial","Arial"'
}
},
subtitle: {
style: {
color: '#666',
font: 'bold 12px "Arial","Arial","Arial"'
}
},
legend: {
itemStyle: {
font: '8pt "Arial","Arial","Arial"',
color: 'black'
},
itemHoverStyle:{
color: 'gray'
}
}
};
Highcharts.setOptions(Highcharts.theme); var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'c2449f32-a781-4a11-84e4-9eefa7b513bf',plotBackgroundColor: null,plotBorderWidth: null,plotShadow: false,type: 'pie'
},
title: {
text:'', align: 'center', x: 0
},
subtitle: {
text: ''
},
tooltip: {
formatter: function() {return '<b>'+ this.point.name +'</b>: '+ Math.round(this.percentage) +'%';}
},
plotOptions: {
pie: {allowPointSelect: true,cursor: 'pointer',dataLabels: {enabled: true,format: '{point.percentage:.1f}%',color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'black', style: { textShadow: 'none' } }, showInLegend: true,borderWidth: 0}
},
xAxis: {

},
yAxis: [{

}],
credits: {
enabled: false },
exporting: {
enabled: true },
series: [
{type: 'pie',name: 'Revenue',data: ]}
]
});
});
}); </pre>
<pre lang="HTML"><div id="c2449f32-a781-4a11-84e4-9eefa7b513bf" style="min-width: 17%; height: 300px; margin: _MARGIN_ auto"></div></pre>

推荐答案

（ function （）{
Highcharts.theme = {
colors：[' ＃cc0000'，' ＃38B6AB'，' ＃ff8000'，' ＃27ae60'，' ＃bf9393'，' ＃2c3e50'，' ＃7f8c8d'，' ＃2980b9'，' ＃6a5a8c'，' ＃ e74c3c']，
图表：{
高建群oundColor：{
linearGradient：[ 0 ， 0 ， 0 ， 0 ]，
止损：[
[ 0 ，' rgb（255,255,255）']，
[ 1 ，' rgb（240,240,255）']
]
}，
}，
title：{
style：{
color： ' ＃000'，
font：' 粗体16pxArial，Arial，Arial'
}
}，
副标题：{
style：{
color：' ＃666'，
font：' 粗体12pxArial，Arial，Arial'
}
}，
传奇：{
itemStyle：{
f ont：' 8ptArial，Arial，Arial'，
颜色：' black'
}，
itemHoverStyle：{
color ：' grey'
}
}
};
Highcharts.setOptions（Highcharts.theme）; var chart;

(function () { Highcharts.theme = { colors: ['#cc0000','#38B6AB','#ff8000','#27ae60','#bf9393','#2c3e50','#7f8c8d','#2980b9','#6a5a8c','#e74c3c'], chart: { backgroundColor: { linearGradient: [0, 0, 0, 0], stops: [ [0, 'rgb(255, 255, 255)'], [1, 'rgb(240, 240, 255)'] ] }, }, title: { style: { color: '#000', font: 'bold 16px "Arial","Arial","Arial"' } }, subtitle: { style: { color: '#666', font: 'bold 12px "Arial","Arial","Arial"' } }, legend: { itemStyle: { font: '8pt "Arial","Arial","Arial"', color: 'black' }, itemHoverStyle:{ color: 'gray' } } }; Highcharts.setOptions(Highcharts.theme); var chart;

（ document ）。ready（ function （）{
chart = new Highcharts.Chart（{
chart：{
renderTo：' c2449f32-a781-4a11-84e4-9eefa7b513bf'，plotBackgroundColor： null ，plotBorderWidth： null ，plotShadow： false ，键入：' pie'
}，
title：{
text ：' '，align：' < span class =code-string> center'，x： 0
}，
副标题：{
text：' '
}，
工具提示：{
formatter： function （）{ return ' < b>' + 此 .point.name + ' < / b>：' + 数学 .round （ this .percentage）+ ' ％';}
}，
plotOptions：{
pie：{allowPointSelect： true ，cursor：' pointer'，dataLabels：{enabled： true ，格式：' {point.percentage：.1f}％'，颜色：（Highcharts.theme&& Highcharts.theme.dataLabelsColor）|| ' black'，样式：{textShadow：' none'}}，showInLegend： true ，borderWidth： 0 }
}，
xAxis：{

}，
yAxis：[{

}]，
点数：{
已启用： false }，
导出：{
已启用： true }，
系列：[
{type：' pie' ，名称：' 收入'，数据：]}
]
}）;
}）;
}）;

(document).ready(function() { chart = new Highcharts.Chart({ chart: { renderTo: 'c2449f32-a781-4a11-84e4-9eefa7b513bf',plotBackgroundColor: null,plotBorderWidth: null,plotShadow: false,type: 'pie' }, title: { text:'', align: 'center', x: 0 }, subtitle: { text: '' }, tooltip: { formatter: function() {return '<b>'+ this.point.name +'</b>: '+ Math.round(this.percentage) +'%';} }, plotOptions: { pie: {allowPointSelect: true,cursor: 'pointer',dataLabels: {enabled: true,format: '{point.percentage:.1f}%',color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'black', style: { textShadow: 'none' } }, showInLegend: true,borderWidth: 0} }, xAxis: { }, yAxis: [{ }], credits: { enabled: false }, exporting: { enabled: true }, series: [ {type: 'pie',name: 'Revenue',data: ]} ] }); }); });

<div id="c2449f32-a781-4a11-84e4-9eefa7b513bf" style="min-width: 17%; height: 300px; margin: _MARGIN_ auto"></div>

我的尝试：

< pre lang =JavaScript>

What I have tried:

<pre lang="JavaScript">

（function（）{

Highcharts.theme = {

颜色：[&＃39;＃cc0000&＃39;，&＃39;＃38B6AB&＃39;，&＃39;＃ff8000&＃39;，& ;＃39;＃27ae60&安培;＃39;，&安培;＃39;＃bf9393&安培;＃39;，&安培; ＃39;＃2c3e50&安培;＃39;，&安培;＃39;＃7f8c8d&安培;＃39;，&安培;＃39;＃2980b9&安培;＃39;，&安培;＃39;＃6a5a8c&安培;＃39;，&安培;＃39 ;＃e74c3c&＃39;]，

图表：{

backgroundColor：{

linearGradient：[0,0,0,0] ，

止损：[

[0，&＃39; rgb（255,255,255）&＃39;]，

[1，&＃39; rgb（240,240,255）&＃39;]

]

}，

}，

标题：{

风格：{

颜色：&＃39;＃000&＃39;，

font：&＃39; bold 16px& quot; Arial& quot;，& quot; Arial& quot;，& quot; Arial& quot;&＃39;

}

}，

副标题：{

风格：{

颜色：&＃39; ＃666&＃39;，

font：&＃39; bold 12px& quot; Arial& quot;，& quot; Arial& quot;，& quot; Arial& quot; &＃39;

}

}，

图例：{

itemStyle：{

font：&＃39; 8pt& quot; Arial& quot;，& quot; Arial& quot;，& quot; Arial&am p; quot;&＃39;，

color：&＃39; black&＃39;

}，

itemHoverStyle： {

color：&＃39; grey&＃39;

}

}

};

Highcharts.setOptions（Highcharts.theme）; var chart;

(function () {
Highcharts.theme = {
colors: ['#cc0000','#38B6AB','#ff8000','#27ae60','#bf9393','#2c3e50','#7f8c8d','#2980b9','#6a5a8c','#e74c3c'],
chart: {
backgroundColor: {
linearGradient: [0, 0, 0, 0],
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(240, 240, 255)']
]
},
},
title: {
style: {
color: '#000',
font: 'bold 16px "Arial","Arial","Arial"'
}
},
subtitle: {
style: {
color: '#666',
font: 'bold 12px "Arial","Arial","Arial"'
}
},
legend: {
itemStyle: {
font: '8pt "Arial","Arial","Arial"',
color: 'black'
},
itemHoverStyle:{
color: 'gray'
}
}
};
Highcharts.setOptions(Highcharts.theme); var chart;

这篇关于Highchart没有显示“没有要显示的数据”。信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

Highchart没有显示“没有要显示的数据”。信息 [英] Highchart does not show "no data to display" message

问题描述

推荐答案

相关文章

其他开发语言最新文章

热门教程

热门工具

登录关闭

Highchart没有显示“没有要显示的数据”。信息 [英] Highchart does not show &quot;no data to display&quot; message

问题描述

推荐答案

相关文章

其他开发语言最新文章

热门教程

热门工具

登录 关闭

Highchart没有显示“没有要显示的数据”。信息 [英] Highchart does not show "no data to display" message

登录关闭