亲爱的Highcharts专家，
我有一个Highcharts列图，其中包括以各种方式对数据点的顺序进行排序的能力：
http://jsfiddle.net/9phfzewj/41/
这似乎运作良好。但是，在某些排序转换期间，数据点的宽度会增加。我不希望这种情况发生，但不明白为什么会这样。
例如，点击＆＃34;升序DLP＆＃34;工作正常，但如果你然后点击＆＃34; Descending frequency＆＃34;然后进行正确的排序，但所有点的宽度都会增加。点击＆＃34;按字母顺序排列＆＃34;使点恢复到正确的宽度。
有人能提供任何帮助吗？非常感谢。
提前致谢，
大卫
$(function () {
var chart;
var defaultTitle = "CT doses";
var protocolNames = ['Abdomen','Thorax','Sinus'];
var frequencies = [120,300,250];
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
events: {
drilldown: function(e) {
parentSeriesIndex = e.point.series.index;
parentSeriesName = e.point.series.name;
chart.setTitle({ text:''});
chart.yAxis[0].setTitle({text:'Number'});
chart.xAxis[0].setTitle({text:'DLP range (mGy.cm)'});
chart.xAxis[0].setCategories([], true);
chart.tooltip.options.formatter = function(args) {
returnValue = this.y.toFixed(0) + ', DLP series' + ', ' + this.x;
return returnValue;
};
},
drillup: function(e) {
chart.setTitle({ text: defaultTitle }, { text: '' });
chart.yAxis[0].setTitle({text:'DLP (mGy.cm)'});
chart.xAxis[0].setTitle({text:''});
chart.xAxis[0].setCategories(protocolNames, true);
chart.xAxis[0].update({labels:{rotation:90}});
chart.tooltip.options.formatter = function(args) {
var index = protocolNames.indexOf(this.x);
var comment = this.x + '<br/>' + this.y.toFixed(1) + ' mGy.cm' + '<br/>(n=' + frequencies[index] + ')';
return comment;
};
}
}
},
title: {
text: 'CT doses'
},
xAxis: [{
type: "category",
categories: protocolNames,
labels: {
rotation:90
}
}],
yAxis: [{
min: 0,
title: {
text: 'DLP (mGy.cm)'
}
}],
legend: {
align: 'center',
verticalAlign: 'top',
floating: true,
borderWidth: 0,
y: 70
},
tooltip: {
formatter: function () {
var index = protocolNames.indexOf(this.x);
var comment = this.x + '<br/>' + this.y.toFixed(1) + ' mGy.cm' + '<br/>(n=' + frequencies[index] + ')';
return comment;
},
shared: true,
useHTML: true
},
plotOptions: {
column: {
borderWidth: 0
}
},
series: [{
name: 'DLP',
data: [{
name: 'Abdomen',
y: 150,
freq: 120,
drilldown: 'AbdomenDLP'
}, {
name: 'Thorax',
y: 73,
freq: 300,
drilldown: 'ThoraxDLP'
}, {
name: 'Sinus',
y: 20,
freq: 250,
drilldown: 'SinusDLP'
}],
tooltip: {
valueSuffix: ' mGy.cm'
}
}],
drilldown: {
series: [{
name: 'Abdomen DLP',
id: 'AbdomenDLP',
data: [
['up to 150', 4],
['up to 200', 2],
['up to 250', 1],
['up to 300', 2],
['up to 350', 1]
]
}, {
name: 'Thorax DLP',
id: 'ThoraxDLP',
data: [
['up to 100', 40],
['up to 110', 21],
['up to 120', 24],
['up to 130', 32],
['up to 140', 64]
]
}, {
name: 'Sinus DLP',
id: 'SinusDLP',
data: [
['up to 130', 4],
['up to 140', 2],
['up to 150', 6],
['up to 160', 7],
['up to 170', 9]
]
}]
}
});
$('#sort').click(function() {
chart.series[0].data.sort(function(a, b) {
return b.y > a.y;
});
rebuildSeries();
});
$('#sort2').click(function() {
chart.series[0].data.sort(function(a, b) {
return b.y < a.y;
});
rebuildSeries();
});
$('#sort3').click(function() {
chart.series[0].data.sort(function(a, b) {
return b.category < a.category;
});
rebuildSeries();
});
$('#sort4').click(function() {
chart.series[0].data.sort(function(a, b) {
return b.category > a.category;
});
rebuildSeries();
});
$('#sort5').click(function() {
chart.series[0].data.sort(function(a, b) {
return b.freq < a.freq;
});
rebuildSeries();
});
$('#sort6').click(function() {
chart.series[0].data.sort(function(a, b) {
return b.freq > a.freq;
});
rebuildSeries();
});
function rebuildSeries() {
var newData = {};
var newCategories = [];
for (var i = 0; i < chart.series[0].data.length; i++) {
newData.x = i;
newData.y = chart.series[0].data[i].y;
newData.category = chart.series[0].data[i].category;
newData.drilldown = chart.series[0].data[i].drilldown;
newData.name = chart.series[0].data[i].name;
newData.freq = chart.series[0].data[i].freq;
newCategories.push(chart.series[0].data[i].category);
chart.series[0].data[i].update(newData, false);
}
chart.xAxis[0].categories = newCategories;
chart.redraw({ duration: 1000 });
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://highslide-software.github.io/export-csv/export-csv.js"></script>
<script src="http://github.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
Sort by clicking on one of the options below:
<table>
<tr>
<td><a id="sort2">Ascending DLP</a></td>
<td><a id="sort">Descending DLP</a></td>
</tr>
<tr>
<td><a id="sort3">Alphabetical</a></td>
<td><a id="sort4">Reverse alphabetical</a></td>
</tr>
<tr>
<td><a id="sort5">Frequency</a></td>
<td><a id="sort6">Reverse frequency</a></td>
</tr>
</table>