Google 차트 축 형식 지정

Question

Google 차트에서 축을 다시 포맷하는 방법을 아는 사람이 있습니까?

현재로서는 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); 
}; 

이 솔루션은 차트를 그린 후에 데이터를 동적으로 변경하지 않으면 잘 작동합니다. 이후에 데이터가 변경되는 경우 (예 : 컨트롤 사용)이 솔루션에서는 세로 축의 자동 크기 조정을 허용하지 않습니다. 기본 데이터가 변경된 경우 draw을 다시 호출하기 전에 max 값을 다시 계산하여 수직 축을 올바르게 조정해야합니다.

이 질문은 오래된 질문인데, 아마도 이미 이동했습니다. 비슷한 일을하는 다른 사람을 찾지 못해서 같은 시나리오를 만났습니다.