我有一个带有各种选择菜单的页面。在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/>'; 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)}] });
}
发布于 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";
现场演示: http://jsfiddle.net/BlackLabel/m09ok2cg/
发布于 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();