关于谷歌图表js

时间:2017-11-14 08:26:48

标签: charts google-visualization

我正在使用Google Charts API在我正在处理的webapp上包含各种图表。我使用的图表类型是区域图表,折线图或柱形图。

当我将图表的显示切换为周显示时,我希望任何一点的标题如下所示。我该怎么做?我应该设置哪个参数。

target effect

1 个答案:

答案 0 :(得分:2)

从图片中可以看出,好像你指的是工具提示的标题 这是x轴的格式化值

数据表中的每个单元格都有一个值,格式化值为
可以使用对象表示法设置...

{
  v: 1,
  f: 'Jan 1, 2017 - Jan, 7 2017'
}

或使用以下数据表方法...

setValue(row, col, val)
setFormattedValue(row, col, formattedVal)
setCell(row, col, val, formattedVal)

在以下示例中, x轴的值是周数(从零开始),
格式化的值是日期范围 日期格式化程序用于构建格式化的值...

var xValue = {
  v: (i - startDate.getTime()) / oneWeek,
  f: formatDate.formatValue(dateBegin) + ' - ' + formatDate.formatValue(dateEnd)
};

请参阅以下工作代码段...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var formatDate = new google.visualization.DateFormat({
    pattern: 'MMM dd, yyyy'
  });

  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Week');
  data.addColumn('number', 'y0');

  var oneWeek = (1000 * 60 * 60 * 24 * 7);
  var startDate = new Date(2017, 0, 1);
  var endDate = new Date();
  for (var i = startDate.getTime(); i < endDate.getTime(); i = i + oneWeek) {
    // x value
    var dateBegin = new Date(i);
    var dateEnd = new Date(i + oneWeek - 1);
    var xValue = {
      v: (i - startDate.getTime()) / oneWeek,
      f: formatDate.formatValue(dateBegin) + ' - ' + formatDate.formatValue(dateEnd)
    };

    // y value (y = 2x + 8)
    var yValue = 2 * xValue.v + 8;

    // add data row
    data.addRow([
      xValue,
      yValue
    ]);
  }

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