20

我有显示值随时间变化的折线图。它有效，但我认为如果我可以添加在悬停时显示工具提示的点会很棒。像这样的东西：在此处输入图像描述 但我不能直接在其中一个点上使用工具提示。

var data = google.visualization.arrayToDataTable([
    ['time', 'value'],
    ['12:00',   1],
    ['13:00',   5],
    ['14:00',   8],
    ['15:00',   12],
    ['16:00',   11],
    ['17:00',   15],

]);

new google.visualization.LineChart(document.getElementById('visualization')).
  draw(data, {});
4

2 回答 2

20

正如我的评论中所述，您可以使用注释角色来执行此操作。

您的原始代码：

var data = google.visualization.arrayToDataTable([
    ['time', 'value'],
    ['12:00',   1],
    ['13:00',   5],
    ['14:00',   8],
    ['15:00',   12],
    ['16:00',   11],
    ['17:00',   15],

]);

new google.visualization.LineChart(document.getElementById('visualization')).
  draw(data, {});

您需要添加两列——一列用于注释标记，一列用于注释文本。假设您想要在 14:00 和 16:00 发表两条评论，例如：

function drawVisualization() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'time');
  data.addColumn('number', 'value');
  data.addColumn({type: 'string', role:'annotation'});
  data.addColumn({type: 'string', role:'annotationText'});
  data.addRows([
    ['12:00',   1, null, null],
    ['13:00',   5, null, null],
    ['14:00',   8, 'A', 'This is Point A'],
    ['15:00',   12, null, null],
    ['16:00',   11, 'B', 'This is Point B'],
    ['17:00',   15, null, null],
  ]);

  new google.visualization.LineChart(document.getElementById('visualization')).
    draw(data, {});
}

这是结果：

示例注释

要添加asgalant为图表添加点的解决方案，您可以执行以下操作：

function drawVisualization() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'time');
  data.addColumn('number', 'value');
  data.addColumn('number', 'points');
  data.addColumn({type: 'string', role:'annotation'});
  data.addColumn({type: 'string', role:'annotationText'});
  data.addRows([
    ['12:00',   1, null, null, null],
    ['13:00',   5, null, null, null],
    ['14:00',   8, 8, 'A', 'This is Point A'],
    ['15:00',   12, null, null, null],
    ['16:00',   11, 11, 'B', 'This is Point B'],
    ['17:00',   15, null, null, null],
  ]);

  new google.visualization.LineChart(document.getElementById('visualization')).
    draw(data, {
      series: {
        0: {
          // set any applicable options on the first series
        },
        1: {
          // set the options on the second series
          lineWidth: 0,
          pointSize: 5,
          visibleInLegend: false
        }
      }
    });
}

结果如下：

样品

于 2013-07-25T23:42:52.500 回答
15

如果我正确阅读了您的问题，您希望每个数据点的线上都出现点，并且将鼠标悬停在这些点上应该会产生一个工具提示。如果这就是您所追求的，图表已经完成了这两件事，您只是看不到点，因为默认情况下它们的大小为 0。在 LineChart 中设置“pointSize”选项以使点更大：

new google.visualization.LineChart(document.getElementById('visualization')).
    draw(data, {
        pointSize: 5
    });

编辑：

要仅强调图表中的某些点，您需要添加一个仅包含这些值的新数据系列（您可以将此系列直接添加到 DataTable 中，或者如果您能以某种方式区分，则使用 DataView 动态创建它您想从其他人那里强调的要点）。然后你想设置图表的series选项隐藏第二个系列中的线条，从图例中移除第二个系列，并使其点变大（如果你想匹配颜色，你也可以在这里设置它的颜色），像这样：

series: {
    0: {
        // set any applicable options on the first series
    },
    1: {
        // set the options on the second series
        lineWidth: 0,
        pointSize: 5,
        visibleInLegend: false
    }
}
于 2013-07-25T05:46:33.820 回答