Question

这是originally asked on Google groups，但由于我没有收到任何回复，我在此问这个问题。

我正在绘制温度，各种计数等基本数据和日期时间，我想附加第三栏作为进一步说明。

E.g。

time, value, description
time, value, description
time, value, description

因此，我正在考虑以最简单的方式绘制尽可能全屏的最小（最低LOC）。

到目前为止https://jsfiddle.net/kaihendry/q1mczqc1/2/我还没有想到如何显示描述（它是一个信息框/选择？在术语上不确定），在我的例子中是内核版本，当我点击一个点。 / p>

此外，我不明白为什么在图表右侧有这些空值标签： http://s.natalian.org/2015-06-16/1434449447_1054x1058.png

任何让http://s.natalian.org/2015-06-16/foo.html缩放以填满整个屏幕的提示？我特别想让它在我的iPhone上使用。

Answer 1

我还没想过如何显示描述（是不是信息框/选择？在术语上不确定）

在Web开发中，这称为工具提示。在Google图表中，您可以通过使用以下内容替换注释行来添加工具提示：

//data.addColumn('string', 'kernel');
data.addColumn({type: 'string', role: 'tooltip'});

因此，第3列不会作为数据系列处理，而是作为工具提示处理。

此外，我不明白为什么在图表右侧有这些空值标签

显示空值，因为（如前所述），您插入了2个数据系列（'Date'和'kernel'）。如果您进行之前提到的替换，则将替换空值

任何提示......缩放以填满整个屏幕？

您可以添加以下选项来配置图表的尺寸：

var options = {
    chartArea: {width: '80%', height: '80%'}
};

此外，由于您使用的折线图版本略显过时，您应该替换

var chart = new google.charts.Line(document.getElementById('linechart_material'));

与

var chart = new google.visualization.LineChart(document.getElementById('linechart_material'));

在以下jsfiddle中，您可以找到最终的工作版本
（有更多修正，如水平轴范围和图例定位）。

Answer 2

如果我理解正确，你想添加第三列作为每个点的描述。

如果您添加第三列

data.addColumn('string', 'kernel');

谷歌图表将此作为另一个系列，因为数据是字符串，它无法绘制系列并显示为空。

您可以添加第3列作为工具提示。

data.addColumn({type: 'string', role: 'tooltip'});

但是要使工具提示起作用，您需要将折线图更改为可视化折线图

var chart = new google.visualization.LineChart(document.getElementById('linechart_material'));

要使图表填满屏幕，您可以更改div样式。

<div id="linechart_material" style="height:100%;"></div>