格式谷歌图表轴

Question

有谁知道我可以如何重新格式化我的轴谷歌图表？

目前我在我的v轴上列出字节，但它显示字节，我希望它显示KB，因为有时价值高达数十万。

我试过阅读配置选项（特别是vAxis.format），但它似乎并不支持我想要做的事情。我可以用这种方式格式化我的V轴吗？还是我只能用字节来显示它？

Answer 1

退房this小提琴我放在一起。

google.setOnLoadCallback(drawStuff); 

function drawStuff() { 

    var data = new google.visualization.arrayToDataTable([ 
     ['Move', 'Percentage'], 
     ["King's pawn (e4)", 4400000000], 
     ["Queen's pawn (d4)", 3100000000], 
     ["Knight to King 3 (Nf3)", 1200000000], 
     ["Queen's bishop pawn (c4)", 200000000], 
     ['Other', 100000000] 
    ]); 

    var ranges = data.getColumnRange(1); 

    var log1024 = Math.log(1024); 

    var scaleSuffix = [ 
     "B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"]; 

    function byteFormatter(options) {} 

    byteFormatter.prototype.formatValue = function (value) { 
     var scale = Math.floor(Math.log(value)/log1024); 
     var suffix = scaleSuffix[scale]; 
     var scaledValue = value/Math.pow(1024, scale); 
     return Math.round(scaledValue * 100)/100 + " " + suffix; 
    }; 

    byteFormatter.prototype.format = function (dt, c) { 
     var rows = dt.getNumberOfRows(); 
     for (var r = 0; r < rows; ++r) { 
      var v = dt.getValue(r, c); 
      var fv = this.formatValue(v); 
      dt.setFormattedValue(r, c, fv); 
     } 
    }; 

    var formatter = new byteFormatter(); 

    formatter.format(data, 1); 

    var max = ranges.max * 1; 

    var options = { 
     title: 'Chess opening moves', 
     width: 900, 
     legend: { 
      position: 'none' 
     }, 
     chart: { 
      subtitle: 'popularity by percentage' 
     }, 
     allowHtml: true, 
     vAxis: { 
      ticks: [{ 
       v: 0 
      }, { 
       v: max * 0.2, 
       f: formatter.formatValue(max * 0.2) 
      }, { 
       v: max * 0.4, 
       f: formatter.formatValue(max * 0.4) 
      }, { 
       v: max * 0.6, 
       f: formatter.formatValue(max * 0.6) 
      }, { 
       v: max * 0.8, 
       f: formatter.formatValue(max * 0.8) 
      }, { 
       v: max, 
       f: formatter.formatValue(max) 
      }] 
     }, 
     axes: { 
      x: { 
       0: { 
        side: 'top', 
        label: 'White to move' 
       } // Top x-axis. 
      }, 
     }, 
     bar: { 
      groupWidth: "90%" 
     } 
    }; 

    var chart = new google.visualization.ColumnChart(document.getElementById('top_x_div')); 
    // Convert the Classic options to Material options. 
    chart.draw(data, options); 
}; 

如果在绘制图表后不动态更改数据，此解决方案可以很好地工作。如果数据随后发生变化（例如使用Control），则此解决方案不允许垂直轴的自动缩放。 如果底层数据发生更改，则应在重新调用draw之前重新计算max值，以正确缩放垂直轴。

我知道这是一个老问题，你可能已经移动了... 我找不到任何其他人做类似的事情，并遇到了同样的情况。