以下是我的高级图表示例:
var url = 'https://api.myjson.com/bins/12puf3';
$.get({
url: url,
type: 'GET',
dataType: 'json',
success: function (data) {
var months = [];
datas = [];
estimeSapColor = "#009dc1"; // Bleu - Estimation Fournisseur
reelGrdfColor = "#d8662c"; // Orange - Relève Distributeur
console.log(data.G);
$.each(data.G, function(index, val) {
months.push(data.G[index].month + " " + data.G[index].year);
datas.push(parseInt(data.G[index].consoSimple));
});
Highcharts.chart('container', {
chart: {
type: 'column',
events: {
load: function() {
this.xAxis[0].setExtremes(data.G.length -5 ,data.G.length-1);
}
},
},
title: {
text: 'Total fruit consumtion, grouped by gender'
},
xAxis: {
categories: months,
crosshair: true
},
yAxis: {
allowDecimals: false,
min: 5,
title: {
text: 'Number of fruits'
}
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0,
dataLabels: {
enabled: true,
formatter: function() {
return this.y > 30 ? this.y : null;
}
}
},
series: {
formatter: function() {
console.log(this.y < 0);
},
minPointLength: 5 // Largeur de la colonne
}
},
series: [{
name: 'Estimation Fournisseur',
data: datas,
color: estimeSapColor,
stack: 'male'
}]
});
}
})
.done(function() {
console.log("success");
$('.highcharts-button').hide();
$('.highcharts-axis-title').hide();
})
.fail(function() {
console.log("error");
})
.always(function() {
console.log("complete");
});
&#13;
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
&#13;
您可以注意到第一个元素是2013年5月,最后一个元素是2014年5月。
是否有一种方法,一种条件,一种功能,可以将2014年5月的专栏放在2013年5月的旁边,而无需添加系列对象?
编辑: