highcharts - 如何按总数对xAxis类别进行排序？ [英] highcharts - How to sort xAxis category by total?
本文介绍了highcharts - 如何按总数对xAxis类别进行排序？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
有没有办法按总数订购这张高图？
https://jsfiddle.net/bsvLnnxv/3/
在这种情况下预期的最终结果应该是：
姓名1 - > 19
姓名4 - > 12
姓名3 - > 10
姓名2 - > 8
查找以下代码：
$（function（）{$（'＃container'）。highcharts（{chart：{ type：'column'}，title：{text：'Stacked column chart'}，xAxis：{type：'category'}，yAxis：{min：0，title：{text：'Highchart test'}，stackLabels：{启用：tru e，style：{fontWeight：'bold'}}}，legend：{enabled：true}，plotOptions：{series：{stacking：'normal'}}，series：[{name：'AAA'，data：[{ name：'Name 1'，y：5，drilldown：'Name1AAA'}，{name：'Name 2'，y：2}，{name：'Name 3'，y：2}]}，{name：' BBB'，data：[{name：'Name 1'，y：10，drilldown：'Name1BBB'}，{name：'Name 2'，y：5}]，{name：'CCC'，data：[ {name：'Name 4'，y：12}，{name：'Name 3'，y： 8}，{name：'Name 1'，y：4，drilldown：'Name1CCC'}，{name：'Name 2'，y：1}]}]，钻取：{series：[{name：'Name 1 - AAA'，id：'Name1AAA'，data：[['Name 1/1'，2]，['Name 1/2'，2]，['Name 1/3'，1]，]}，{名称：'Name 1-BBB'，id：'Name1BBB'，data：[['Name 1/1'，7]，['Name 1/2'，2]，['Name 1/3'，1] ，姓名1 - CCC'，身份证：'姓名1CCC'，数据：[['姓名1/1'，2]，['姓名1/2'，3]，['姓名1 / 3'，4]， ]}}}}）;}）;
< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js>< / script>< script src =https：//code.highcharts .com / highcharts.js>< / script>< script src =https://code.highcharts.com/modules/exporting.js>< / script>< script src =http ：//github.highcharts.com/modules/drilldown.js>< / script>< div id =containerstyle =min-width：310px; height：400px; margin：0 auto>< / div>
解决方案
< '#container'）。highcharts（{chart：{type：'column'}，title：{text：'Stacked column chart'}，xAxis：{type：'category'}， yAxis：{min：0，title：{text：'Highchart test'}，stackLabels：{enabled：true，style：{fontWeight：'bold'}}}，legend：{enabled：true}，plotOptions：{series： {stacking：'normal'}}，series：[{name：'AAA'，data：[{name：'Name 1'，y：5，drilldown：'Name1AAA'}，{name：'Name 4'，y ：{name：'BBB'，data：[{name：'Name 1'，0}，{name：'Name 3'，y：2}，{name：'Name 2'，y：2}} y：10，钻取：'Name1BBB'}，{name ：名称4'，y：0}，{名称：'名称3'，y：0}，{名称：'名称2'，y：5}]，{名称：'CCC'，data：[{ name：'Name 1'，y：4，drilldown：'Name1CCC'}，{name：'Name 4'，y：12}，{name：'Name 3'，y：8}，{name：'Name 2 '，y：1}]}]，钻取：{系列：[{name：'Name 1 - AAA'，id：'Name1AAA'，data：[['Name 1/1'，2]，['Name 1 / 2'，2]，['Name 1/3'，1]，]}，{name：'Name 1-BBB'，id：'Name1BBB'，data：[ ['Name 1/1'，7]，['Name 1/2'，2]，['Name 1/3'，1]，]}，{name：'Name 1 - CCC'，id：'Name1CCC '，data：[['Name 1/1'，2]，['Name 1/2'，3]，['Name 1/3'，4]，]}]}}）;}）;
我找到了解决方案！
Highcharts没有自动排序数据的属性，因此您必须先填入所有系列数据排序。
另一个关注点：如果你没有一个值，你将需要将该值设置为0，以确保所有类别具有相同的数量元素。
https://jsfiddle.net/bsvLnnxv / 4 /
< script src =https：//ajax.googleapis。 com / ajax / libs / jquery / 1.10.2 / jquery.min.js>< / script>< script src =https://code.highcharts.com/highcharts.js>< / script>< script src =https://code.highcharts.com/modules/exporting.js>< / script>< script src =http://github.highcharts.com/modules/drilldown .js>< / script>< div id =containerstyle =min-width：310px; height：400px; margin：0 auto>< / div>
Is there a way to order this highchart chart by total?
https://jsfiddle.net/bsvLnnxv/3/
The final result expected in this case should be:
Name 1 -> 19
Name 4 -> 12
Name 3 -> 10
Name 2 -> 8
Find the code below:
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
type: 'category'
},
yAxis: {
min: 0,
title: {
text: 'Highchart test'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold'
}
}
},
legend: {
enabled: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'AAA',
data: [{
name: 'Name 1',
y: 5,
drilldown: 'Name1AAA'
}, {
name: 'Name 2',
y: 2
}, {
name: 'Name 3',
y: 2
}]
}, {
name: 'BBB',
data: [{
name: 'Name 1',
y: 10,
drilldown: 'Name1BBB'
}, {
name: 'Name 2',
y: 5
}]
}, {
name: 'CCC',
data: [{
name: 'Name 4',
y: 12
}, {
name: 'Name 3',
y: 8
}, {
name: 'Name 1',
y: 4,
drilldown: 'Name1CCC'
}, {
name: 'Name 2',
y: 1
}]
}],
drilldown: {
series: [{
name: 'Name 1 - AAA',
id: 'Name1AAA',
data: [
['Name 1/1', 2],
['Name 1/2', 2],
['Name 1/3', 1],
]
}, {
name: 'Name 1 - BBB',
id: 'Name1BBB',
data: [
['Name 1/1', 7],
['Name 1/2', 2],
['Name 1/3', 1],
]
}, {
name: 'Name 1 - CCC',
id: 'Name1CCC',
data: [
['Name 1/1', 2],
['Name 1/2', 3],
['Name 1/3', 4],
]
}]
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="http://github.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
解决方案
I found the solution!
Highcharts doesn't have a property to sort the data automatically, so you must fill all series data previously sorted.
Another point of attention: if you don't have a value you will need to set the value as 0 to make sure that all categories have the same quantity of elements.
https://jsfiddle.net/bsvLnnxv/4/
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
type: 'category'
},
yAxis: {
min: 0,
title: {
text: 'Highchart test'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold'
}
}
},
legend: {
enabled: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'AAA',
data: [{
name: 'Name 1',
y: 5,
drilldown: 'Name1AAA'
}, {
name: 'Name 4',
y: 0
}, {
name: 'Name 3',
y: 2
}, {
name: 'Name 2',
y: 2
}]
}, {
name: 'BBB',
data: [{
name: 'Name 1',
y: 10,
drilldown: 'Name1BBB'
}, {
name: 'Name 4',
y: 0
}, {
name: 'Name 3',
y: 0
}, {
name: 'Name 2',
y: 5
}]
}, {
name: 'CCC',
data: [{
name: 'Name 1',
y: 4,
drilldown: 'Name1CCC'
}, {
name: 'Name 4',
y: 12
}, {
name: 'Name 3',
y: 8
}, {
name: 'Name 2',
y: 1
}]
}],
drilldown: {
series: [{
name: 'Name 1 - AAA',
id: 'Name1AAA',
data: [
['Name 1/1', 2],
['Name 1/2', 2],
['Name 1/3', 1],
]
}, {
name: 'Name 1 - BBB',
id: 'Name1BBB',
data: [
['Name 1/1', 7],
['Name 1/2', 2],
['Name 1/3', 1],
]
}, {
name: 'Name 1 - CCC',
id: 'Name1CCC',
data: [
['Name 1/1', 2],
['Name 1/2', 3],
['Name 1/3', 4],
]
}]
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="http://github.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
这篇关于highcharts - 如何按总数对xAxis类别进行排序？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
