首次刷新后，xAxis图像在Highcharts中消失
首次刷新后，xAxis图像在Highcharts中消失
提问于 2019-03-05 02:24:31
我有一个带有各种选择菜单的页面。在ajax调用中使用select选项来构建Highcharts条形图。每次筛选器更改时，都会重新创建图形。我这样做而不是更新序列数据，因为在过去，我注意到销毁和重新创建比更新更有效。
我希望图像显示在x轴上，所以我使用了一个很好的小技巧来创建两个x轴，使用格式化程序在第一个轴上返回一个图像，并将第二个轴链接到第一个轴。这在第一次刷新时有效。但是，此后每次重新创建图表时，图像都会消失。我检查了我的控制台，我没有看到任何错误。
知道这里发生了什么吗？
/**
* Whenselection changes
*/
$(document).on('change', '.filter', function(){
getChartData($params)
})
});
/**
* API call to get data that will populate charts.
* @param {obj} params
*/
function getChartData(params)
{
//Get chart data
$.ajax({
url: apiURL + '/chartdata/',
data: params,
dataType: 'json',
cache: false,
success: function(data) {
initChart(data[0]);
}
});
function initChart(chartData)
{
var chart = Highcharts.chart('container', {
chart: {
type: 'bar',
backgroundColor: 'transparent', //#E8EAF6',
height: '23%',
marginLeft: 35
},
title: {
text: null
},
xAxis: {
categories: [category1, category2],
lineColor: 'transparent',
min: 0,
tickColor: 'transparent',
title: {
text: null
},
labels: {
x: -35,
useHTML: true,
overflow: 'allow',
formatter: function () {
if(this.isFirst == true)
return '<img src="../assets/img/nat-jr-grad-gold.png"><br/>';
else
return '<img src="../assets/img/nat-jr-grad-purple.png"><br/>';
}
}
},
yAxis: {
min: 0,
title: {
useHTML: true,
text: null
},
labels: {
enabled: false
},
lineWidth: 0,
minorGridLineWidth: 0,
gridLineWidth: 0,
lineColor: 'transparent',
gridLineColor: 'transparent',
},
legend: {
enabled: false
},
series: [{
name: category1,
data: [{name: category1, y:Math.round(chartData.p_grad_nongap * 100), {y: null}],
}, {
name: category2,
data: [null, {name: category2, y: Math.round(chartData.p_grad_gap * 100)}]
}]
});}
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-03-05 11:14:23
我在一个简化的例子中重现了你的问题：http://jsfiddle.net/BlackLabel/sm2r684n/
第一次，图像是异步加载的，图表在计算边距时不会将其考虑在内。每一次结果都不同，所以你应该等到图片加载完成：
var img = new Image();
img.onload = function() {
initChart();
}
img.src = "https://www.highcharts.com/samples/graphics/sun.png";Stack Overflow用户
发布于 2019-03-06 02:54:08
我认为ppotaczek是问题的根本原因；图像是异步加载的，图表在计算边距时没有考虑到这一点。他的建议是使用setTimeout函数不断地重新绘制图形，这是相当低效的。我的解决方法是在创建图表后使用chart.renderer将图像添加为平均元素。
/* Render X-Axis images */
chart.renderer.image('../assets/img/img1.png', 0, 40, 32, 36)
.css({
class: 'icon-img',
zIndex: 10
})
.add();
chart.renderer.image('../assets/img/img2.png', 0, 130, 32, 36)
.css({
class: 'icon-img',
zIndex: 10
})
.add();页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54989310
复制相关文章
相似问题
腾讯云开发者
