Highcharts与不同数据的比较

时间:2017-03-22 11:09:39

标签: javascript jquery json object highcharts

以下是我的高级图表示例:



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;
&#13;
&#13;

您可以注意到第一个元素是2013年5月,最后一个元素是2014年5月。

是否有一种方法,一种条件,一种功能,可以将2014年5月的专栏放在2013年5月的旁边,而无需添加系列对象?

编辑:

它应如下所示:enter image description here

0 个答案:

没有答案