Ändern der Achse auf Google-Visualisierung Liniendiagramm ist inkonsistent

Question

Ich arbeite an einer Google-Visualisierung, wo die Daten zurückgegeben werden können mehr als 2 Achsen. Wenn es mehr als 2 gibt, zeige ich nur die ersten 2 zurück und biete eine Kontrolle für das Schalten der Achse an.

Hier ist meine Arbeit 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 of 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() { 
    }); 
    }) 

} 

Wenn Sie das Element in der Nummer Achse drehen von und schalten Sie die 2 Elemente in der prozentualen Achse der Schalter korrekt passiert, aber wenn Ich schalte sie zurück, der Zahlenachsenbereich ist falsch, er hat den Bereich für die Währungsachse.

Answer 1

Ich bin mir nicht sicher, warum, aber die Anordnung der Spaltennummern außer Betrieb schien Probleme zu verursachen. Ich habe die Zeile showCols.sort() hinzugefügt, bevor Sie setColumns aufrufen, und es scheint das Verhalten behoben zu haben, das Sie in der Frage beschrieben haben. Hier ist eine gegabelte Geige http://jsfiddle.net/qf8nL24s/1/