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

Question

我正在尝试使用谷歌图表库创建折线图。

数据包含日期(x 轴)、数字(第 1 列)、数字(第 2 列)、 float (第 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

正在 vAxes 选项中设置格式，该选项覆盖格式化程序...

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

这里不需要格式化程序...

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>