Question

我正在使用Vue.js和Vue的Google图表包装库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'}],

请参阅以下工作片段...

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>

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

1 个答案: