Google chart" K " вместо тысяч

Я использую инструменты Google charts (https://developers.google.com/chart/) для отображения данных иногда мои значения действительно высоки (100.000+).

мои графики довольно малы по размерам, и 100.000 не вписывается, но 100k будет. Есть ли способ настроить vAxis для отображения чисел на vAxis в "K", если есть значения выше 10k?

9
google-visualization javascript

4 ответов

визуализация Google использует подмножество десятичный формат ICU, который может быть установлен с DataView или vAxis.format.

к сожалению, это подмножество не включает в себя возможность деления на 1000. Поэтому сначала вам нужно будет манипулировать данными. Допустим, это ваши данные:

  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]
  ]);

нам нужно клонировать данные, а затем разделить каждую точку на 1000. Вот простой способ сделать это:

  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"}}
          );
}
9

коротко

options['vAxis']['format'] = 'short';
16

Форматы Номеров, вы можете управлять форматированием номеров меток с помощью hAxis.формат и vAxis.формат.

например, {hAxis: { format:'#,###%'} } отображает значения "1,000%", "750%", и "50%" для значений 10, 7.5 и 0.5. Вы также можете предоставить любой из следующих пресетов:

{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., ,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)
2

попробуйте установить displayExactValues опции конфигурации true:

отображать ли сокращенную, округленную версию значений на верхняя часть графика, чтобы сэкономить место; false указывает, что это может быть. Для например, если установлено значение false, 56123.45 может отображаться как 56.12 k.

Это должно дать вам поведение, которое вы хотите, хотя это не дает вам явной возможности установить значение, с которого вы хотите его запустить использование суффикса "k".

1