google chart double axis, Format einstellen

Question

Ich habe ein Google-Balkendiagramm mit zwei X-Achsen erstellt. Mein Problem ist, dass ich nicht das richtige Format auf der unteren Achse zu bekommen scheint, die in Prozent angezeigt werden sollte.

Ich habe versucht, die folgenden

axes:{{},{format:'#%'}}} 

Und im allgemeinen das Einfügen format:'#%' an Orten zu verwenden, die Sinn machen würde, aber nichts scheint zu funktionieren.

Gibt es jemanden, der eine Idee dafür hat?

Siehe den gesamten Code hier: https://jsfiddle.net/laursen92/azr4kfn0/1/

 google.charts.load('current', { 
    'packages': ['bar'] 
    }); 
    google.charts.setOnLoadCallback(drawStuff); 

    function drawStuff() { 
    var data = new google.visualization.arrayToDataTable([ 
     ['Slave number', 'Voltage', '%'], 
     ['Slave 1', 12.15, 0.40], 
     ['Slave 2', 12.18, 0.50], 
     ['Slave 3', 11.80, 0.60], 
     ['Slave 4', 13.12, 0.70], 
    ]); 
    var formatter = new google.visualization.NumberFormat({ 
     pattern: '##0.00' 
    }); 
    var formatter2 = new google.visualization.NumberFormat({ 
     pattern: '##0%' 
    }); 
    formatter.format(data, 1); 
    formatter2.format(data, 2); 
    var options = { 
     width: 800, 

     chart: { 
     title: 'Status of slaves', 
     subtitle: 'Overview of the voltage and SOC of connected slaves. ' 
     }, 

     bars: 'horizontal', // Required for Material Bar Charts. 
     series: { 
     0: { 
      axis: 'voltage' 
     }, // Bind series 0 to an axis named 'voltage'. 
     1: { 
      axis: 'percent' 
     } // Bind series 1 to an axis named 'soc'. 
     }, 
     axes: { 
     x: { 
      voltage: { 
      side: 'top', 
      label: 'Voltage' 
      }, // Top x-axis. 
      percent: { 
      label: 'Percent', 
      } // Bottom x-axis. 
     } 
     }, 

    }; 

    var chart = new google.charts.Bar(document.getElementById('dual_x_div')); 
    chart.draw(data, options); 
    }; 

Answer 1

ein Update für Ihr Fidde hier: https://jsfiddle.net/Balrog30/azr4kfn0/4/

ich das ein wenig codepen schrieb ich verwendet, um die Änderungen an den Materialdiagrammoptionen Reverse-Engineering, die immer noch meist undokumentiert sind. Sie können das hier finden: http://codepen.io/nbering/pen/Kddvge

Hier ist, wie die Option formatiert werden soll:

var options = { 
    axes: { 
    x: { 
     yourAxis: { 
     format: { 
      pattern: "#%" 
     } 
     } 
    } 
}; 

- Oder -

options.axes.x.yourAxis.format.pattern = "#%";