我选择条形图，因为我的图表有很多类别，所以我认为它比柱形图更好。
我选择以下源代码作为开始：
但是，当我放置许多类别时，类别标签会相互重叠。我首先解决了它使容器更高。但是结果并不像我预期的那样，因为我在图表的开头和第一个类别标签之间以及最后一个标签和图表的结尾之间有很多“填充”：
见小提琴：
下面的代码：
$(function () {
var categories = ["ANALOGO","ANALOGO KLORNER","AÑADIR UNA PIEZA ","AÑADIR RESTO PIEZAS","ARANDELA DE ORO","ARANDELA ZOCALO","CAJITA","CALCINABLE","CALCINABLE DIAMETRO 4","CALCINABLE KLORNER","CARILLA EMPRES","COMPLETA DEFINITIVA","COMPLETA PROVISIONAL ","COMPOSTURA","COMPOSTURA PROTESIS","COMPOSTURA SIMPLE","CORONA CIRCONIO","CORONA CIRCONIO SOBRE IMPLANTE","CORONA EMPRESS SIN METAL","CORONA JACKET CERAMICA","CORONA METAL CERAMICA","CORONA PROVISIONAL CEMENTADA","CORONA SOBRE IMPLANTE","CUBETA DE RESINA","ESQUELETICO BILATERAL 1-3 PZAS","ESQUELETICO BILATERAL 3-5 PZAS","ESQUELETICO BILATERAL 5-8 PZAS","ESQUELETICO BILATERAL 8-14 PZAS","ESQUELETICO UNILATERAL 1-3 PZAS","FERULA DE BLANQUEAMIENTO","FERULA DESCARGA","GANCHO UNIDAD","IMPLANTE PROVISIONAL ATORNILLADO","MERYLAND PIEZA","PARCIAL ACRILICO 10 PZAS O MUÑON","PARCIAL ACRILICO DE 1-3 PZAS","PARCIAL ACRILICO DE 4 PZAS","PARCIAL ACRILICO DE 5 PZAS","PARCIAL ACRILICO DE 6 PZAS","PARCIAL ACRILICO DE 7 PZAS","PARCIAL ACRILICO DE 8 PZAS","PARCIAL ACRILICO DE 9 PZAS","PARCIAL ACRILICO PROV. 10 PZAS O MUÑÓN","PARCIAL ACRILICO PROV. DE 1-3 PZAS","PARCIAL ACRILICO PROV. DE 4 PZAS","PARCIAL ACRILICO PROV. DE 5 PZAS","PARCIAL ACRILICO PROV. DE 6 PZAS","PARCIAL ACRILICO PROV. DE 7 PZAS","PERNO MUÑON COLADO","PERNO MUÑON DOBLE COLADO","PILAR ANGULADO","PROTESIS HIBRIDA","REBASE PROTESIS","REPARACION ARCADA CERAMICA","REPARACION CERAMICA","REPLICA DIAMETRO 5 MM","SOBREDENTADURA CON LOCATOR","SOLDADURA","TORNILLO AVINENT","TORNILLO KLORNER","TORNILLO TITANIO","VARIOS"];
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: categories
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
backgroundColor: '#FFFFFF',
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [
{
name:'COMPANY-3',
data: [
[categories.indexOf("FERULA DESCARGA"),13],[categories.indexOf("ESQUELETICO BILATERAL 8-14 PZAS"),1],[categories.indexOf("ESQUELETICO BILATERAL 5-8 PZAS"),3],[categories.indexOf("PARCIAL ACRILICO PROV. DE 7 PZAS"),1],[categories.indexOf("CORONA CIRCONIO SOBRE IMPLANTE"),14],[categories.indexOf("GANCHO UNIDAD"),76],[categories.indexOf("ESQUELETICO BILATERAL 3-5 PZAS"),1],[categories.indexOf("COMPLETA PROVISIONAL "),36],[categories.indexOf("PARCIAL ACRILICO DE 4 PZAS"),15],[categories.indexOf("ANALOGO"),1],[categories.indexOf("PARCIAL ACRILICO PROV. DE 1-3 PZAS"),3],[categories.indexOf("CORONA CIRCONIO"),27],[categories.indexOf("AÑADIR 1ª PIEZA "),1],[categories.indexOf("MERYLAND PIEZA"),5],[categories.indexOf("TORNILLO TITANIO"),37],[categories.indexOf("COMPLETA DEFINITIVA"),1],[categories.indexOf("CORONA PROVISIONAL CEMENTADA"),16],[categories.indexOf("SOBREDENTADURA CON LOCATOR"),3],[categories.indexOf("TORNILLO AVINENT"),44],[categories.indexOf("REPARACION CERAMICA"),2],[categories.indexOf("ARANDELA DE ORO"),8],[categories.indexOf("CORONA SOBRE IMPLANTE"),651],[categories.indexOf("VARIOS"),30],[categories.indexOf("CORONA METAL CERAMICA"),67],[categories.indexOf("ARANDELA ZOCALO"),30],[categories.indexOf("PARCIAL ACRILICO DE 6 PZAS"),1],[categories.indexOf("REPLICA DIAMETRO 5 MM"),1],[categories.indexOf("PARCIAL ACRILICO 10 PZAS O MÁS"),1],[categories.indexOf("PARCIAL ACRILICO DE 1-3 PZAS"),19],[categories.indexOf("ESQUELETICO BILATERAL 1-3 PZAS"),2],[categories.indexOf("PARCIAL ACRILICO PROV. 10 PZAS O MÁS"),1],[categories.indexOf("AÑADIR RESTO PIEZAS"),1],[categories.indexOf("CORONA JACKET CERAMICA"),6],[categories.indexOf("PROTESIS HIBRIDA"),44]
]},
{
name:'COMPANY-5',
data: [
[categories.indexOf("CALCINABLE"),2],[categories.indexOf("CORONA METAL CERAMICA"),4],[categories.indexOf("GANCHO UNIDAD"),11],[categories.indexOf("VARIOS"),2],[categories.indexOf("CORONA SOBRE IMPLANTE"),26],[categories.indexOf("COMPLETA DEFINITIVA"),1],[categories.indexOf("ANALOGO"),3],[categories.indexOf("PARCIAL ACRILICO PROV. 10 PZAS O MÁS"),1],[categories.indexOf("TORNILLO TITANIO"),20],[categories.indexOf("PILAR ANGULADO"),2],[categories.indexOf("PARCIAL ACRILICO DE 1-3 PZAS"),3],[categories.indexOf("CALCINABLE DIAMETRO 4"),18],[categories.indexOf("TORNILLO AVINENT"),1],[categories.indexOf("PARCIAL ACRILICO DE 5 PZAS"),1]
]},
{
name:'COMPANY-6.',
data: [
[categories.indexOf("PROTESIS HIBRIDA"),28],[categories.indexOf("COMPLETA PROVISIONAL "),1],[categories.indexOf("IMPLANTE PROVISIONAL ATORNILLADO"),1],[categories.indexOf("REPARACION CERAMICA"),5],[categories.indexOf("CORONA JACKET CERAMICA"),3],[categories.indexOf("TORNILLO KLORNER"),1],[categories.indexOf("PERNO MUÑON COLADO"),2],[categories.indexOf("FERULA DESCARGA"),14],[categories.indexOf("CORONA EMPRESS SIN METAL"),4],[categories.indexOf("CORONA PROVISIONAL CEMENTADA"),16],[categories.indexOf("CORONA CIRCONIO SOBRE IMPLANTE"),1],[categories.indexOf("PARCIAL ACRILICO DE 4 PZAS"),1],[categories.indexOf("COMPLETA DEFINITIVA"),1],[categories.indexOf("CORONA CIRCONIO"),4],[categories.indexOf("VARIOS"),2],[categories.indexOf("CALCINABLE KLORNER"),1],[categories.indexOf("CORONA METAL CERAMICA"),25],[categories.indexOf("ANALOGO KLORNER"),1],[categories.indexOf("CORONA SOBRE IMPLANTE"),322],[categories.indexOf("SOBREDENTADURA CON LOCATOR"),9],[categories.indexOf("CARILLA EMPRES"),2],[categories.indexOf("GANCHO UNIDAD"),2]
]},
{
name:'COMPANY-7',
data: [
[categories.indexOf("CALCINABLE"),1],[categories.indexOf("CORONA SOBRE IMPLANTE"),2],[categories.indexOf("CORONA METAL CERAMICA"),6],[categories.indexOf("REPARACION CERAMICA"),3],[categories.indexOf("PROTESIS HIBRIDA"),1]
]} ]
});
});
只是要知道： - 在我的导航器上，我可以看到所有类别标签，但是使用 jsfiddle 我只能得到其中的一些。
- 并非我的所有系列都有所有数据，这就是为什么我将数据放入系列中，表达式为 categories.indexOf()。