javascript - 谷歌图表按堆栈高度排序

Question

我试图在从 json 文件插入一些数据后重新排序我的图表。我尝试对数据数组进行排序，但没有成功。

有任何插件或简单的方法可以重新排序堆栈并首先显示最高的吗？

这是我的代码:

		var ChartHelper = {

			data: [],
			labels: [],
			datarray: [],

			init: function() {
				this.setupChart();
				this.bindEvents();
			},
			bindEvents: function() {

				// Load the Visualization API and the corechart package.
			      google.charts.load('current', {'packages':['bar']});

			      // Set a callback to run when the Google Visualization API is loaded.
			      google.charts.setOnLoadCallback(ChartHelper.drawChart);

			      if (document.addEventListener) {
					    window.addEventListener('resize', ChartHelper.resizeChart);
					}
					else if (document.attachEvent) {
					    window.attachEvent('onresize', ChartHelper.resizeChart);
					}
					else {
					    window.resize = ChartHelper.resizeChart;
					}

			},

			drawChart: function() {
				 // Create the data table.
		        var data = new google.visualization.DataTable();

		        ChartHelper.data = google.visualization.arrayToDataTable(ChartHelper.datarray);

		        

		        // Set chart options
		        ChartHelper.options = {
			        title: 'Usuários influentes',
					width: '100%',
			        height: 900,
			        chartArea: {width: '85%', top: 50,left:10},
			        
			        stacked: true
			      };
			     

		        // Instantiate and draw our chart, passing in some options.
		        ChartHelper.chart = new google.charts.Bar(document.getElementById('myChart'));
		        ChartHelper.chart.draw(ChartHelper.data, google.charts.Bar.convertOptions(ChartHelper.options));



		        

			},

			getBrands: function() {
				$.ajax({
				  url: "./data/brands.json",
				  dataType: 'json',
				  async: false,
				  success: function(data) {
					ChartHelper.brands = [];
					$.each( data, function( key, val ) {
							
							if(ChartHelper.labels.indexOf(val.name) === -1){
								ChartHelper.labels.push( val.name );
								ChartHelper.brands.push(val);
							}
							
					});
				  }
				});

				// push brands
				Object.keys(ChartHelper.brands).filter(function(index) {
      					ChartHelper.datarray.push([ChartHelper.brands[index].name]);
      			});
				
			},

			getUsers: function() {
				$.ajax({
				  url: "./data/users.json",
				  dataType: 'json',
				  async: false,
				  success: function(data) {
					ChartHelper.users = [];
					  $.each( data, function( key, val ) {
					  		ChartHelper.users.push(val);
					  		ChartHelper.setupDatasets(val,key);
					  });
				  }
				});

				// push users
				var users = [];
				Object.keys(ChartHelper.users).filter(function(index) {
      					users.push(ChartHelper.users[index].login.username);
      			});
				users.unshift('Marcas');
      			ChartHelper.datarray.unshift(users);
			},

			getInteractions: function() {
				
				$.ajax({
				  url: "./data/interactions.json",
				  dataType: 'json',
				  async: false,
				  success: function(data) {
					ChartHelper.interactions = [];
					  $.each( data, function( key, val ) {
					  		ChartHelper.interactions.push(val);
					  });
				  }
				});

			},

			setupDatasets: function(user,i) {
				var totalInte;
				var userdata = [];
				var j = i+1;
				$.each(ChartHelper.labels, function( key, val ){
					totalInte = 0;
					$.each(ChartHelper.interactions, function( key2, val2 ){
						if(user.id == val2.user) {
							Object.keys(ChartHelper.brands).filter(function(index) {
							    if(ChartHelper.brands[index].id == val2.brand && ChartHelper.brands[index].name == val)
							    	totalInte++;
							});
						}
					});

					
					if(totalInte > 0)
						userdata = totalInte;
					else
						userdata = '';

					
					
					ChartHelper.datarray[key][j] = totalInte;
				
				});

				

				
				
				

				
			},

			setupChart: function() {
				

		        ChartHelper.datarray = [];

				this.getBrands();
				this.getInteractions();
				this.getUsers();		
		        
			},

			getRandColor: function(){
			    var brightness = 4;
			    var rgb = [Math.random() * 256, Math.random() * 256, Math.random() * 256];
			    var mix = [brightness*51, brightness*51, brightness*51]; //51 => 255/5
			    var mixedrgb = [rgb[0] + mix[0], rgb[1] + mix[1], rgb[2] + mix[2]].map(function(x){ return Math.round(x/2.0)})
			    return "rgb(" + mixedrgb.join(",") + ")";
			},
			
			resizeChart: function() {
    			ChartHelper.chart.draw(ChartHelper.data, ChartHelper.options);
			}


		};


		$(document).ready(function() {
			// ready
			ChartHelper.init();
		});
	

尝试了不同图表的多种选项，我仍在阅读文档以寻找解决方案，请帮助我!

这是一个演示: DEMO

Answer 1

在绘制图表之前对数据表进行排序...

    // sort data table on value column
    ChartHelper.data.sort([{column: 1}]);

    ChartHelper.chart.draw(ChartHelper.data, google.charts.Bar.convertOptions(ChartHelper.options));