google chart double axis、フォーマットを設定する

Question

x軸が2つあるGoogle棒グラフを作成しました。 私の問題は、ボトム軸に正しいフォーマットを得ることができないように見えることです。これはパーセンテージで表示する必要があります。

私は理にかなって場所でformat:'#%'を挿入し、次の

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

、一般的にを使用しようとしましたが、何も動作していないようにみえます。

これについて考えている人はいますか？

ここで全体のコードを参照してください：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

ここであなたのfiddeへのアップデートです：https://jsfiddle.net/Balrog30/azr4kfn0/4/

私は材料チャートオプションの変更をリバースエンジニアリングして書いた少しcodepenを使用し、依然としてほとんど文書化されていない。特にリンクはcodepenするため

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