jsfiddle 上的 highcharts 问题,其中系列在钻取时未被删除
Issue with highcharts on jsfiddle where series is not being removed on drillup
我的项目所基于的演示是 here。
我已经针对我自己的国家和信息对此进行了更改,但问题存在于 drillup 函数中。
复制步骤:
打开上面link中的jsfiddle,点击地图中的CA(加利福尼亚州),然后点击按钮'<返回美国'
接下来单击西海岸的其他地方可以看到加利福尼亚向下钻取尚未从地图中删除。单击后退按钮后,我需要将这些删除。
代码主体如下:
Highcharts.mapChart('container', {
chart: {
events: {
drilldown: function (e) {
if (!e.seriesOptions) {
var chart = this,
mapKey = 'countries/us/' + e.point.drilldown + '-all',
// Handle error, the timeout is cleared on success
fail = setTimeout(function () {
if (!Highcharts.maps[mapKey]) {
chart.showLoading('<i class="icon-frown"></i> Failed loading ' + e.point.name);
fail = setTimeout(function () {
chart.hideLoading();
}, 1000);
}
}, 3000);
// Show the spinner
chart.showLoading('<i class="icon-spinner icon-spin icon-3x"></i>'); // Font Awesome spinner
// Load the drilldown map
$.getScript('https://code.highcharts.com/mapdata/' + mapKey + '.js', function () {
data = Highcharts.geojson(Highcharts.maps[mapKey]);
// Set a non-random bogus value
$.each(data, function (i) {
this.value = i;
});
// Hide loading and add series
chart.hideLoading();
clearTimeout(fail);
chart.addSeriesAsDrilldown(e.point, {
name: e.point.name,
data: data,
dataLabels: {
enabled: true,
format: '{point.name}'
}
});
});
}
this.setTitle(null, { text: e.point.name });
},
drillup: function () {
this.setTitle(null, { text: 'USA' });
}
}
},
我知道一种方法,这是通过在钻取函数中执行 window.history.go(-1) 但这会删除缩放图形并在单击后破坏按钮。 history.go(-1) 不会破坏按钮,但单击后也无法正常工作。
我在这里发现了一个类似的问题:Proper way to remove all series data from a highcharts chart? 但它处理的是条形图,因此代码不同。
这个问题的解决方法是改变
for (var i = 0; i < chart.series.length; i++)
到
while(chart.series.length > 0)
chart.series[0].remove(true);
我原以为不在 jsfiddle 上保存缓存也可以解决这个问题,但我也无法让它工作。
任何帮助都会很棒。谢谢。
是5.0.3到5.0.4版本的回归bug。在最新的开发版本中已经修复,所以使用5.0.3/最新的github版本。
<script src="http://github.highcharts.com/master/highmaps.src.js"></script>
<script src="http://code.highcharts.com/maps/modules/data.js"></script>
<script src="http://github.highcharts.com/maps/modules/drilldown.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/us/us-all.js"></script>
<script src="http://code.highcharts.com/maps/5.0.3/highmaps.js"></script>
<script src="http://code.highcharts.com/maps/modules/data.js"></script>
<script src="http://code.highcharts.com/maps/5.0.3/modules/drilldown.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/us/us-all.js"></script>
我的项目所基于的演示是 here。
我已经针对我自己的国家和信息对此进行了更改,但问题存在于 drillup 函数中。
复制步骤: 打开上面link中的jsfiddle,点击地图中的CA(加利福尼亚州),然后点击按钮'<返回美国'
接下来单击西海岸的其他地方可以看到加利福尼亚向下钻取尚未从地图中删除。单击后退按钮后,我需要将这些删除。
代码主体如下:
Highcharts.mapChart('container', {
chart: {
events: {
drilldown: function (e) {
if (!e.seriesOptions) {
var chart = this,
mapKey = 'countries/us/' + e.point.drilldown + '-all',
// Handle error, the timeout is cleared on success
fail = setTimeout(function () {
if (!Highcharts.maps[mapKey]) {
chart.showLoading('<i class="icon-frown"></i> Failed loading ' + e.point.name);
fail = setTimeout(function () {
chart.hideLoading();
}, 1000);
}
}, 3000);
// Show the spinner
chart.showLoading('<i class="icon-spinner icon-spin icon-3x"></i>'); // Font Awesome spinner
// Load the drilldown map
$.getScript('https://code.highcharts.com/mapdata/' + mapKey + '.js', function () {
data = Highcharts.geojson(Highcharts.maps[mapKey]);
// Set a non-random bogus value
$.each(data, function (i) {
this.value = i;
});
// Hide loading and add series
chart.hideLoading();
clearTimeout(fail);
chart.addSeriesAsDrilldown(e.point, {
name: e.point.name,
data: data,
dataLabels: {
enabled: true,
format: '{point.name}'
}
});
});
}
this.setTitle(null, { text: e.point.name });
},
drillup: function () {
this.setTitle(null, { text: 'USA' });
}
}
},
我知道一种方法,这是通过在钻取函数中执行 window.history.go(-1) 但这会删除缩放图形并在单击后破坏按钮。 history.go(-1) 不会破坏按钮,但单击后也无法正常工作。
我在这里发现了一个类似的问题:Proper way to remove all series data from a highcharts chart? 但它处理的是条形图,因此代码不同。
这个问题的解决方法是改变
for (var i = 0; i < chart.series.length; i++)
到
while(chart.series.length > 0)
chart.series[0].remove(true);
我原以为不在 jsfiddle 上保存缓存也可以解决这个问题,但我也无法让它工作。
任何帮助都会很棒。谢谢。
是5.0.3到5.0.4版本的回归bug。在最新的开发版本中已经修复,所以使用5.0.3/最新的github版本。
<script src="http://github.highcharts.com/master/highmaps.src.js"></script>
<script src="http://code.highcharts.com/maps/modules/data.js"></script>
<script src="http://github.highcharts.com/maps/modules/drilldown.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/us/us-all.js"></script>
<script src="http://code.highcharts.com/maps/5.0.3/highmaps.js"></script>
<script src="http://code.highcharts.com/maps/modules/data.js"></script>
<script src="http://code.highcharts.com/maps/5.0.3/modules/drilldown.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/us/us-all.js"></script>