Google görselleştirme çizgi grafiğinde değişen eksen tutarsız

Question

İade edilen verinin 2'den fazla eksene sahip olduğu bir google görselleştirme üzerinde çalışıyorum. 2'den fazla varsa, sadece ilk 2 geri dönüşü gösterir ve ekseni değiştirmek için bir kontrol sağlar. İşte

benim devam eden iş ... 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() { 
    }); 
    }) 

} 

Eğer sayı ekseninde öğenin açın ve anahtarı doğru olur eksen yüzdesinde 2 parça açarsanız ama Sayı eksen aralığının yanlış olduğunu geri döndürüyorum, para birimi ekseninin aralığına sahip.

Answer 1

Neden emin değilim, ancak sıra dışı olan sütun sayılarının dizilişinin soruna neden olduğu görülüyordu. setColumns'u aramadan önce showCols.sort() numaralı satırı ekledim ve sorunda anlattığınız davranışı düzeltmiş gibi görünüyor. İşte bir çatallı keman http://jsfiddle.net/qf8nL24s/1/