Google图表格式化程序不能修改工具提示

Question

我想用谷歌图表库创建一个折线图。数据包含日期（x轴），数字（col 1），数字（col 2），浮点数（col 3）。

我想在第3列工具提示显示两位小数，同时保持其y轴的0到100，这是我当前的代码（在这里运行https://jsfiddle.net/uqh56hsu/1/）：

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

function drawChart() { 

    var data = new google.visualization.DataTable(); 
    data.addColumn('datetime', 'Hours'); 
    data.addColumn('number', 'col1'); 
    data.addColumn('number', 'col2'); 
    data.addColumn('number', 'percent'); 

    data.addRows([ 
[new Date(1454950800*1000),0,0,0],[new Date(1454947200*1000),0,0,0],[new Date(1454943600*1000),2,0,0.00],[new Date(1454940000*1000),24,1,4.17],[new Date(1454936400*1000),12,1,8.33],[new Date(1454932800*1000),64,4,6.25],[new Date(1454929200*1000),176,11,6.25],[new Date(1454925600*1000),142,7,4.93],[new Date(1454922000*1000),114,7,6.14],[new Date(1454918400*1000),0,0,0],[new Date(1454914800*1000),0,0,0],[new Date(1454911200*1000),0,0,0],[new Date(1454907600*1000),0,0,0],[new Date(1454904000*1000),0,0,0],[new Date(1454900400*1000),0,0,0],[new Date(1454896800*1000),0,0,0],[new Date(1454893200*1000),0,0,0],[new Date(1454889600*1000),0,0,0],[new Date(1454886000*1000),0,0,0],[new Date(1454882400*1000),0,0,0],[new Date(1454878800*1000),0,0,0],[new Date(1454875200*1000),0,0,0],[new Date(1454871600*1000),180,10,5.56],  ]); 

    var formatter = new google.visualization.NumberFormat({ 
       fractionDigits: 2, 
       suffix: '%' 
    }); 
    formatter.format(data, 3); 

    var options = { 
    width: 900, 
    height: 500, 
      backgroundColor: '#f1f1f1', 
      colors: ['#ff851b', '#03a9f4', '#8dc859'], 
      dateFormat: 'H', 
      vAxes:[ 
       { titleTextStyle: {color: '#FF0000'}}, 
       { titleTextStyle: {color: '#FF0000'}, minValue: 0, maxValue: 100, format: '#\'%\'', viewWindowMode : 'explicit', viewWindow:{ 
      max:100, 
      min:0 
      }} 
      ], 
      series:[ 
      {targetAxisIndex:0}, 
      {targetAxisIndex:0}, 
      {targetAxisIndex:1} 
     ] 
    }; 


    var chart = new google.charts.Line(document.getElementById('linechart_material')); 
    chart.draw(data, google.charts.Line.convertOptions(options)); 
} 

我试着加入格式化代码在代码的早些时候和之后，试图将其应用于其他列等，似乎没有任何工作。第三栏工具提示总是取消小数点。

我在做什么错？

Answer 1

的format在vAxes选项，这是压倒一切的formatter被设置...

只需设置格式 - >format: '#,##0.00\'%\''

无需一个formatter这里...

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

 
function drawChart() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('datetime', 'Hours'); 
 
    data.addColumn('number', 'col1'); 
 
    data.addColumn('number', 'col2'); 
 
    data.addColumn('number', 'percent'); 
 

 
    data.addRows([ 
 
    [new Date(1454950800*1000),0,0,0], 
 
    [new Date(1454947200*1000),0,0,0], 
 
    [new Date(1454943600*1000),2,0,0.00], 
 
    [new Date(1454940000*1000),24,1,4.17], 
 
    [new Date(1454936400*1000),12,1,8.33], 
 
    [new Date(1454932800*1000),64,4,6.25], 
 
    [new Date(1454929200*1000),176,11,6.25], 
 
    [new Date(1454925600*1000),142,7,4.93], 
 
    [new Date(1454922000*1000),114,7,6.14], 
 
    [new Date(1454918400*1000),0,0,0], 
 
    [new Date(1454914800*1000),0,0,0], 
 
    [new Date(1454911200*1000),0,0,0], 
 
    [new Date(1454907600*1000),0,0,0], 
 
    [new Date(1454904000*1000),0,0,0], 
 
    [new Date(1454900400*1000),0,0,0], 
 
    [new Date(1454896800*1000),0,0,0], 
 
    [new Date(1454893200*1000),0,0,0], 
 
    [new Date(1454889600*1000),0,0,0], 
 
    [new Date(1454886000*1000),0,0,0], 
 
    [new Date(1454882400*1000),0,0,0], 
 
    [new Date(1454878800*1000),0,0,0], 
 
    [new Date(1454875200*1000),0,0,0], 
 
    [new Date(1454871600*1000),180,10,5.56] 
 
    ]); 
 

 
    var options = { 
 
    width: 900, 
 
    height: 500, 
 
    backgroundColor: '#f1f1f1', 
 
    colors: ['#ff851b', '#03a9f4', '#8dc859'], 
 
    dateFormat: 'H', 
 
    vAxes:[ 
 
     { 
 
     titleTextStyle: {color: '#FF0000'} 
 
     }, 
 
     { 
 
     titleTextStyle: { 
 
      color: '#FF0000' 
 
     }, 
 
     minValue: 0, 
 
     maxValue: 100, 
 

 
     format: '#,##0.00\'%\'', // set format here -- formatter not needed 
 

 
     viewWindowMode : 'explicit', 
 
     viewWindow: { 
 
      max:100, 
 
      min:0 
 
     } 
 
     } 
 
    ], 
 
    series:[ 
 
     {targetAxisIndex:0}, 
 
     {targetAxisIndex:0}, 
 
     {targetAxisIndex:1} 
 
    ] 
 
    }; 
 

 
    var chart = new google.charts.Line(document.getElementById('linechart_material')); 
 
    chart.draw(data, google.charts.Line.convertOptions(options)); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="linechart_material"></div>