10

データを表示するためにグーグルチャートツール（https://developers.google.com/chart/）を使用していますが、値が非常に高い場合があります（100.000+）。

私のグラフは次元がかなり小さく、100.000は収まりませんが、100kは収まります。10kを超える値がある場合に、vAxisの数値を「K」で表示するようにvAxisを構成する方法はありますか？

4

4 に答える 4

21

簡単に言えば、

options['vAxis']['format'] = 'short';
于 2015-10-06T07:50:35.063 に答える
11

Google Visualizationは、 ICU Decimal Formatのサブセットを使用します。これはDataView、またはで設定できますvAxis.format。

残念ながら、そのサブセットには1,000で割る機能は含まれていません。したがって、最初にデータを操作する必要があります。これがあなたのデータだとしましょう：

  var data = google.visualization.arrayToDataTable([
    ['x', 'Data'],
    ['A', 123456],
    ['B', 234567],
    ['C', 456789],
    ['D', 890123],
    ['E', 789012],
    ['F', 789012],
    ['G', 890123],
    ['H', 456789],
    ['I', 234567],
    ['J', 345678],
    ['K', 345678],
    ['L', 345678],
    ['M', 123456],
    ['N', 123456]
  ]);

データのクローンを作成してから、各ポイントを1,000で割る必要があります。これを行う簡単な方法は次のとおりです。

  var formattedData = data.clone();
  for (var i = 0; i < formattedData.getNumberOfRows(); i++) {
    var dataPoint = formattedData.getValue(i, 1);
    formattedData.setValue(i, 1, dataPoint / 1000);
  }

次に、これをグラフ化し、形式を次のように設定できます。-vAxis: {format: "#,###k"}しかし、問題があります。シリーズにマウスを合わせると、890,123が890.123と表示されていることがわかります。これは良くないので、ループに別の行を追加して修正する必要があります。

  var formattedData = data.clone();
  for (var i = 0; i < formattedData.getNumberOfRows(); i++) {
    var dataPoint = formattedData.getValue(i, 1);
    formattedData.setValue(i, 1, dataPoint / 1000);
    formattedData.setFormattedValue(i, 1, dataPoint.toString());
  }

これにより、データは890123のように見えますが、軸が見栄えがするように890.123としてプロットされます。カンマを追加したい場合は、このようなリソースがあり、必要に応じてこれを使用できます。私はあなたのデータ形式を知っているとは思いませんので、何千もの区切り文字や小数などが必要な場合は、グラフの上にマウスを置いたときに、その部分を自分で理解できるようにします。

最終的な作業コードは次のとおりです。

function drawVisualization() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['x', 'Data'],
    ['A', 123456],
    ['B', 234567],
    ['C', 456789],
    ['D', 890123],
    ['E', 789012],
    ['F', 789012],
    ['G', 890123],
    ['H', 456789],
    ['I', 234567],
    ['J', 345678],
    ['K', 345678],
    ['L', 345678],
    ['M', 123456],
    ['N', 123456]
  ]);

  // Clone data and divide by 1,000 in column 1
  var formattedData = data.clone();
  for (var i = 0; i < formattedData.getNumberOfRows(); i++) {
    var dataPoint = formattedData.getValue(i, 1);
    formattedData.setValue(i, 1, dataPoint / 1000);
    formattedData.setFormattedValue(i, 1, dataPoint.toString());
  }

  // Create and draw the visualization.
  new google.visualization.LineChart(document.getElementById('visualization')).
      draw(formattedData, {curveType: "function",
                  width: 500, height: 400,
                  vAxis: {format: "#,###k"}}
          );
}
于 2013-03-07T00:07:56.637 に答える
5

数値フォーマット、hAxis.formatおよびvAxis.formatを使用してラベル番号のフォーマットを制御できます。

たとえば、{hAxis：{format：'＃、###％'}}は、値10、7.5、および0.5の値「1,000％」、「750％」、および「50％」を表示します。次のプリセットのいずれかを指定することもできます。

{format: 'none'}: displays numbers with no formatting (e.g., 8000000)
{format: 'decimal'}: displays numbers with thousands separators (e.g., 8,000,000)
{format: 'scientific'}: displays numbers in scientific notation (e.g., 8e6)
{format: 'currency'}: displays numbers in the local currency (e.g., $8,000,000.00)
{format: 'percent'}: displays numbers as percentages (e.g., 800,000,000%)
{format: 'short'}: displays abbreviated numbers (e.g., 8M)
{format: 'long'}: displays numbers as full words (e.g., 8 million)
于 2017-02-01T06:44:42.293 に答える
1

displayExactValues構成オプションをtrue次のように設定してみてください。

スペースを節約するために、グラフの上部に値の短縮された丸められたバージョンを表示するかどうか。falseは、可能性があることを示します。たとえば、falseに設定すると、56123.45は56.12kと表示される場合があります。

これにより、必要な動作が得られるはずですが、「k」サフィックスの使用を開始する値を明示的に設定することはできません。

于 2013-03-06T07:47:53.333 に答える