Учитывая диапазон чисел, показать метку вместо значения оси? - PullRequest
Новая
       8

Учитывая диапазон чисел, показать метку вместо значения оси?

0 голосов
/ 21 января 2019

Итак, у меня есть этот интересный пример использования, который мне нужно выполнить на работе, и сейчас я немного растерялся.

Чего мне нужно добиться, так это: у меня разброс Google Chartсюжет с кучей точек X / Y.X и Y определяются числами, поэтому естественно, что легенды на осях X и Y показывают числа в различных диапазонах.

Однако вместо того, чтобы показывать числа, мне нужно показывать метки.

Поэтому, если у меня есть диапазон чисел, скажем, 209009 - 219959, то вместо отображения 200 000 и 210 000 на оси X мне нужно показать «MyLabel».

В настоящее время я не могу найти какой-либо способ сделатьэто и было интересно, если это вообще возможно сделать, используя встроенные функции Google Chart?

1 Ответ

0 голосов
/ 22 января 2019

вы можете использовать опцию ticks, которая принимает массив значений или объектов.
используя нотацию объекта, вы можете указать значение (v:),
и форматированное значение (f:)).

hAxis: {
  ticks: [
    {v: 201000, f: 'My Label A'},
    {v: 202000, f: 'My Label B'},
    {v: 203000, f: 'My Label C'},
    {v: 204000, f: 'My Label D'},
  ]
},

см. Следующий рабочий фрагмент ... 

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var chart = new google.visualization.ScatterChart(document.getElementById('chart_scatter'));

  var data = google.visualization.arrayToDataTable([
    ['x', 'y0'],
    [201000, 54000],
    [202000, 55000],
    [203000, 56000],
    [204000, 57000]
  ]);

  var options = {
    chartArea: {
      bottom: 48,
      height: '100%',
      left: 64,
      right: 48,
      top: 48,
      width: '100%'
    },
    hAxis: {
      ticks: [
        {v: 201000, f: 'My Label A'},
        {v: 202000, f: 'My Label B'},
        {v: 203000, f: 'My Label C'},
        {v: 204000, f: 'My Label D'},
      ]
    },
    height: '100%',
    legend: {
      position: 'top'
    },
    width: '100%'
  };

  chart.draw(data, options);
});
html, body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  overflow: hidden;
  padding: 0px 0px 0px 0px;
}

.chart {
  height: 100%;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="chart" id="chart_scatter"></div>
...