3

使用谷歌的折线图时，如果您将鼠标悬停在某个点上，它会为您提供有关该点的信息。例如，如果一个点位于x:3, y:50且 y 轴称为英寸，则将鼠标悬停在这些点上会如下所示：

.----------.
|3         |
|Inches: 50|
`----------`

当我获取数据时，每个点也存储一个额外的值。所以我的数组看起来像：[[3, 50, 20], [4, 52, 22], [5, 54, 24]]当我悬停时，我希望它看起来像这样：

.----------.
|Time: 3   |
|Inches: 50|
|Extra: 20 |
`----------`

所以我有两个问题是：

  1. 如何在我的 x 值之前添加“时间：”标签？
  2. 如何添加要显示的第三个值？

这是我拥有的代码。这样做是创建第二行而不是将数据添加在一起。你可以看看这里明白我的意思。你也可以将鼠标悬停在这些点上，看看我在说什么。我确信有一种简单的方法可以做到这一点，我只是错过了一些东西。

function drawVisualization() {
    // Create and populate the data table.
    var data = google.visualization.arrayToDataTable([
      ['Time', 'Inches', 'Extra'],
      [  3   ,    50   ,    20  ],
      [  4   ,    52   ,    22  ],
      [  5   ,    54   ,    24  ]
    ]);

    // Create and draw the visualization.
    new google.visualization.LineChart(document.getElementById('visualization')).
        draw(data, {curveType: "function",
                    width: 500, height: 400,
                    vAxis: {title: 'Inches', maxValue: 10},
                    hAxis: {title: 'Time'}}
        );
}

google.setOnLoadCallback(drawVisualization);
4

2 回答 2

3

我解决了这个在选项中添加“focusTarget：'category'”的问题：

draw(data,{..., focusTarget: 'category'}
于 2013-12-03T14:12:50.600 回答
1

我找到了解决方案。这不是我最喜欢的，因为重复数据不是最有效的方式，但无论如何，它是一种解决方案，所以我会在这里发布。

第一个问题来自我创建数据表的方式。arrayToDataTable是有用的，但它是有限的。所以我离开了。这允许我添加自己的列，并在创建这些列时更具描述性。例如，关键是分配一个role. 因此，我创建了用于绘制图表的前 2 列，然后添加了第三列，其中包含 的类型string和角色tooltip。

当我现在将数据添加到我的图表时，对于第三列，当我将鼠标悬停在一个点上时，我准确地传递了我想要显示的内容。这就是重复数据的来源。这没什么大不了的，但我认为可能有更好/更直接的方法。无论如何，这是我的新图表的链接，这是我的代码：

function drawVisualization() {
    // Create and populate the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Time');
    data.addColumn('number', 'Inches');
    data.addColumn({type: 'string', role: 'tooltip'});

    data.addRow(['3', 50, 'Time: 3\n Inches: 50\n Extra: 20']);
    data.addRow(['4', 52, 'Time: 4\n Inches: 52\n Extra: 22']);
    data.addRow(['5', 54, 'Time: 5\n Inches: 54\n Extra: 24']);

    // Create and draw the visualization.
    new google.visualization.LineChart(document.getElementById('visualization')).
        draw(data, {curveType: "function",
                    width: 500, height: 400,
                    vAxis: {title: 'Inches', maxValue: 10},
                    hAxis: {title: 'Time'}}
        );
}

google.setOnLoadCallback(drawVisualization);
于 2012-11-28T18:54:47.900 回答