Настройте всплывающую подсказку, используя vue-google-charts - PullRequest
Новая
       15

Настройте всплывающую подсказку, используя vue-google-charts

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

Я использую Vue.js и библиотеку-оболочку Vue для Google Charts, vue-google-charts, чтобы нарисовать базовый линейный график.Данные представлены в виде временных рядов, и меня не устраивает отображение всплывающей подсказки: для точки на графике всплывающая подсказка имеет формат: «2 016,957 Цена: $ 1025» (соответствует декабрю,2016).

Я хочу, чтобы всплывающая подсказка имела следующий формат: «Декабрь 2016 г. Цена: 1025 долл. США» или «2016,957 Цена: 1025 долл. США».

Хотя я могу добиться отображения любого из этих форматов с помощью стандартной библиотеки Google Charts, я не могу найти решение с использованием vue-google-charts.Основная проблема в том, что google.visualization.DataTable () создается под капотом;все, что я могу сделать, это передать ему массив, и нет никакой возможности настроить столбцы или таблицу данных дальше.Поэтому я не могу сделать, как описано здесь: https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#customizing-tooltip-content.

Еще одно решение, которое я исследовал, - использовать объекты Date вместо десятичных знаков для временной оси.Тем не менее, всплывающая подсказка имеет формат «Цена от 1 декабря 2016 года: 1025 долларов США», что тоже не то, что я хочу.Опять же, эту проблему можно решить с помощью базовой библиотеки (https://developers.google.com/chart/interactive/docs/reference#dateformatter), но не с помощью библиотеки-оболочки Vue.

Кто-нибудь знает, как можно настроить подсказки в библиотеке vue-google-charts?

<GChart
    type="LineChart"
    :data="chartData"
    :options="chartOptions"
 />

export default {
   data () {
        return {
      // Array will be automatically processed with visualization.arrayToDataTable function
      chartData: [
        ['Time', 'Price'],
        ['2014.042', 1000], //january 2014
        ['2014.125', 1170], //february 2014
        ['2014.208', 1170], //march 2014
        ['2014.292', 1170], //april 2014
        ['2014.375', 1170], ...
        ['2014.458', 660],
        ['2014.542', 1030],
        ['2014.625', 1170],
        ['2014.708', 1170],
        ['2014.792', 1170],
        ['2014.875', 1170],
        ['2014.958', 1170], //december 2014
        ['2015.042', 1170],
      ],
      chartOptions: {
        chart: {
          title: 'Company Performance',
          subtitle: 'Sales, Expenses, and Profit: 2014-2017',
        }
      }
    }
  }
}

1 Ответ

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

всплывающая подсказка по умолчанию будет отображать форматированное значение каждой ячейки в таблице данных.

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

[{v: 2014.042, f: 'Jan, 2014'}, {v: 1000, f: '$1,000'}],

это позволяет вам использовать любой формат для оси,
, но форматировать значение для всплывающей подсказки по-разному.

[{v: 2014.042, f: 'Jan, 2014'}, {v: 1000, f: '$1,000'}],

[{v: new Date(2014, 0), f: 'Jan, 2014'}, {v: 1000, f: '$1,000'}],

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

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Time', 'Price'],
    [{v: new Date(2014, 0), f: 'Jan, 2014'}, {v: 1000, f: '$1,000'}],
    [{v: new Date(2014, 1), f: 'Feb, 2014'}, {v: 1170, f: '$1,170'}],
    [{v: new Date(2014, 2), f: 'Mar, 2014'}, {v: 1170, f: '$1,170'}],
    [{v: new Date(2014, 3), f: 'Apr, 2014'}, {v: 1170, f: '$1,170'}],
    [{v: new Date(2014, 4), f: 'May, 2014'}, {v: 1170, f: '$1,170'}],
    [{v: new Date(2014, 5), f: 'Jun, 2014'}, {v: 660, f: '$660'}],
    [{v: new Date(2014, 6), f: 'Jul, 2014'}, {v: 1030, f: '$1,030'}],
    [{v: new Date(2014, 7), f: 'Aug, 2014'}, {v: 1170, f: '$1,170'}],
    [{v: new Date(2014, 8), f: 'Sep, 2014'}, {v: 1170, f: '$1,170'}],
    [{v: new Date(2014, 9), f: 'Oct, 2014'}, {v: 1170, f: '$1,170'}],
    [{v: new Date(2014, 10), f: 'Nov, 2014'}, {v: 1170, f: '$1,170'}],
    [{v: new Date(2014, 11), f: 'Dec, 2014'}, {v: 1170, f: '$1,170'}],
    [{v: new Date(2015, 0), f: 'Jan, 2015'}, {v: 1170, f: '$1,170'}],
  ]);

  var chart = new google.visualization.LineChart(document.getElementById('chart'));
  chart.draw(data, {
    hAxis: {
      format: 'yyyy.MM'
    }
  });
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
...