我目前有一个饼图成功显示在我的报告仪表板上。但是，提出了一个业务请求，要求保留图表轮廓并在所有系列都为空时在中心显示“ noData”消息。
图表为空时，企业不喜欢页面上浮动标签的外观。使用现有的图表对象，是否有可能实质上构造图表轮廓并显示noData消息？
可以添加自定义形状（例如圆形），以在没有数据的情况下显示。使用图表的事件加载和重绘，您可以更新形状以适合图表并放置在中心或在将数据添加到图表时删除。
renderer.circle的API参考：http：//api.highcharts.com/highcharts#Renderer.circle
示例：http：//jsfiddle.net/v8n1159o/1/
chart: {
events: {
load: function () {
var chart = this;
if (!chart.hasData()) {
var r = Math.min(chart.plotWidth / 2, chart.plotHeight / 2),
y = chart.plotHeight / 2 + chart.plotTop,
x = chart.plotWidth / 2 + chart.plotLeft;
chart.pieOutline = chart.renderer.circle(x, y, r).attr({
fill: '#ddd',
stroke: 'black',
'stroke-width': 1
}).add();
}
},
redraw: function () {
var chart = this;
if (chart.pieOutline && chart.pieOutline.element) {
if (chart.hasData()) {
chart.pieOutline.destroy();
} else {
var r = Math.min(chart.plotWidth / 2, chart.plotHeight / 2),
y = chart.plotHeight / 2 + chart.plotTop,
x = chart.plotWidth / 2 + chart.plotLeft;
chart.pieOutline.attr({
cx: x,
cy: y,
r: r
});
}
} else if(!chart.hasData()) {
var r = Math.min(chart.plotWidth / 2, chart.plotHeight / 2),
y = chart.plotHeight / 2 + chart.plotTop,
x = chart.plotWidth / 2 + chart.plotLeft;
chart.pieOutline = chart.renderer.circle(x, y, r).attr({
fill: '#ddd',
stroke: 'black',
'stroke-width': 1
}).add();
}
}
},
...
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句