使用 vue-google-charts 自定义工具提示

Question

我正在使用 Vue.js 和 Vue 的 Google Charts 包装库 vue-google-charts 来绘制基本折线图。数据是时间序列的形式，我对工具提示的显示不满意：对于图表上的一个点，工具提示的格式是：“2,016.957 价格：1025 美元”（对应于 12 月， 2016）。

我想要的是具有以下格式的工具提示： “2016 年 12 月价格：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 对象而不是小数作为时间轴。但是，工具提示的格式为“2016 年 12 月 1 日价格：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',
        }
      }
    }
  }
}

Answer 1

默认工具提示将显示数据表中每个单元格的格式化值。

在构建数据时，
您可以使用对象表示法来提供值 (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'}],

请参阅以下工作 sn-p...

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>