我试图在从 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
最佳答案
在绘制图表之前对数据表进行排序...
// sort data table on value column
ChartHelper.data.sort([{column: 1}]);
ChartHelper.chart.draw(ChartHelper.data, google.charts.Bar.convertOptions(ChartHelper.options));
关于javascript - 谷歌图表按堆栈高度排序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48477353/