I am working on a google visualization where the data being returned can have more than 2 axis. If there are more than 2, I only show the first 2 coming back and provide a control for switching the axis.
Here is my work in progress... http://jsfiddle.net/benstraw/Lx7w0jgL/
//Load the Visualisation API and the package you want to use
google.load('visualization', '1.0', {
'packages': ['corechart']
});
//Set a callback to run with the API is loaded
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
jsonData = {"cols":[{"id":"col_1","label":"Date","type":"string","_cct":{"datatype":"Text","icuFormat":null}},{"id":"col_2","label":"Sum of DEP1","type":"number","_cct":{"datatype":"Curency","icuFormat":"$#,###.##"}},{"id":"col_3","label":"Sum of DEP14","type":"number","_cct":{"datatype":"Curency","icuFormat":"$#,###.##"}},{"id":"col_4","label":"Sum of DEP60","type":"number","_cct":{"datatype":"Curency","icuFormat":"$#,###.##"}},{"id":"col_5","label":"Sum of FDEP","type":"number","_cct":{"datatype":"Number","icuFormat":"#,###"}},{"id":"col_6","label":"Avg of FDEP7 Rate","type":"number","_cct":{"datatype":"Percentage","icuFormat":"#.##%"}},{"id":"col_7","label":"Avg of FDEP14 Rate","type":"number","_cct":{"datatype":"Percentage","icuFormat":"#.##%"}},{"id":"col_8","label":"Sum of DEP90","type":"number","_cct":{"datatype":"Curency","icuFormat":"$#,###.##"}}], "rows":[{"c": [{"v":"\"2015-01-01\"","f":"\"2015-01-01\""},{"v":1619.67,"f":"$1,619.67"},{"v":4217.28,"f":"$4,217.28"},{"v":8092.95,"f":"$8,092.95"},{"v":105,"f":"105"},{"v":0.001429,"f":"0.14%"},{"v":0.001531,"f":"0.15%"},{"v":8588.57,"f":"$8,588.57"}]}, {"c": [{"v":"\"2015-01-02\"","f":"\"2015-01-02\""},{"v":3739.06,"f":"$3,739.06"},{"v":10520.47,"f":"$10,520.47"},{"v":16519.71,"f":"$16,519.71"},{"v":128,"f":"128"},{"v":0.001506,"f":"0.15%"},{"v":0.001653,"f":"0.17%"},{"v":17160.87,"f":"$17,160.87"}] }, {"c": [{"v":"\"2015-01-03\"","f":"\"2015-01-03\""},{"v":3423.92,"f":"$3,423.92"},{"v":8905.73,"f":"$8,905.73"},{"v":13813.97,"f":"$13,813.97"},{"v":119,"f":"119"},{"v":0.001433,"f":"0.14%"},{"v":0.001495,"f":"0.15%"},{"v":14773.98,"f":"$14,773.98"}] } ], "_cct":{"query_name":"Query_2015-03-16","query_link":"\/reports\/query_builder\/7"}};
//create the data table
var data = new google.visualization.DataTable(jsonData);
var options = {
// colors: ['rgb(0, 158, 229)','rgb(228, 59, 0)', 'rgb(228, 0, 229)', '#e2431e', '#f1ca3a', '#6f9654', '#1c91c0', '#4374e0', '#5c3292', '#572a1a', '#999999','rgb(158, 229, 0)', '#1a1a1a'],
fontSize: 12,
backgroundColor: 'transparent',
chartArea: {
width: '75%',
height: '75%'
},
// width: '100%',
titleTextStyle: {
fontSize: 20
},
legend: {
position: 'top',
maxLines: 5
},
animation: {
duration: 1000,
startup: false,
easing: 'in'
},
crosshair: {
trigger: 'both',
opacity: 0.6,
color: 'rgb(228, 59, 0)'
},
hAxis: {
slantedText: true,
gridLines: {color: '#333', count: 6}
}
}
var vAxes = {"0":{"title":"Curency","format":"$#,###.##"},"3":{"title":"Sum of FDEP","format":"#,###"},"4":{"title":"Percentage","format":"#.##%"}}
var series = {"0":{"targetAxisIndex":0},"1":{"targetAxisIndex":0},"2":{"targetAxisIndex":0},"3":{"targetAxisIndex":3},"6":{"targetAxisIndex":0}}
// set up the column picker
var panelData = {"Curency":[{"name":"Sum of DEP1","colId":0,"type":"Curency","targetAxisIndex":0},{"name":"Sum of DEP14","colId":1,"type":"Curency","targetAxisIndex":0},{"name":"Sum of DEP60","colId":2,"type":"Curency","targetAxisIndex":0},{"name":"Sum of DEP90","colId":6,"type":"Curency","targetAxisIndex":0}],"Number":[{"name":"Sum of FDEP","colId":3,"type":"Number","targetAxisIndex":3}],"Percentage":[{"name":"Avg of FDEP7 Rate","colId":4,"type":"Percentage","targetAxisIndex":4},{"name":"Avg of FDEP14 Rate","colId":5,"type":"Percentage","targetAxisIndex":4}]}
var seriesOpts = { 'series': series }
options = _.assign(options, seriesOpts)
var vAxesOpts = { 'vAxes': vAxes }
options = _.assign(options, vAxesOpts)
var filterColumns = [5,6]
var chartView = new google.visualization.DataView(data)
chartView.hideColumns(filterColumns)
var chart = new google.visualization.LineChart(
document.getElementById('kpi-chart')
);
chart.draw(chartView, options);
var columnPanel = $('.kpi-controls-panel .column-list')
_.forEach(panelData, function(n, key) {
columnPanel.append('<h2>' + key + '</h2>')
_.forEach(n, function(o, key) {
//console.log('colProp', o)
var colRow = $('<div></div>')
var checkbox = $('<input class="col-cb" type="checkbox" name="column" value="' + o.colId + ':' + o.targetAxisIndex + '"/>')
var label = o.name + '(' + o.colId + ')'
if (_.has(series, o.colId)) {
checkbox.attr('checked', 'checked')
}
colRow.append(checkbox)
colRow.append(label)
columnPanel.append(colRow)
})
})
var button = $('<p class="button"><a><strong>update columns</strong></a></p>')
columnPanel.append(button)
// handle the column update
$('.kpi-controls-panel .button').click(function(event) {
console.log('update columns clicked')
showCols = [0]
hideCols = []
options.series = {}
_.forEach($('.column-list .col-cb'), function(cb, i) {
var colId = parseInt(cb.value.split(':')[0])
var tarId = parseInt(cb.value.split(':')[1])
if (cb.checked) {
console.log('cb val: ', cb.value)
showCols.push(parseInt(colId)+1)
options.series[colId] = {targetAxisIndex: tarId}
// delete options.series[cb.value+1]
} else {
hideCols.push(parseInt(colId)+1)
}
console.log('series: ', options.series)
})
console.log('showCols', showCols)
console.log('hideCols', hideCols)
// var newChart = new google.visualization.DataView(data)
console.log(options)
chartView.setColumns(showCols)
chart.draw(chartView, options)
var controls = $('.kpi-controls-panel');
controls.slideToggle(function() {
});
})
$('#kpi-controls-link').click(function(){
var controls = $('.kpi-controls-panel');
controls.slideToggle(function() {
});
})
}
If you turn of the item in the number axis, and turn on the 2 items in the percentage axis the switch happens correctly, but when I switch them back the number axis range is wrong, it has the range for the currency axis.
答案 0 :(得分：2)
我不确定原因，但是列号的数组乱序似乎导致了问题。我在致电showCols.sort()之前添加了行setColumns，似乎已修复了您在问题中描述的行为。这是一个分叉的小提琴http://jsfiddle.net/qf8nL24s/1/