最简单的带注释的折线图

Question

这是 originally asked on Google groups 但由于我没有收到回复，所以我在这里提问。

我正在绘制温度、各种计数等带有日期时间的基本数据，我想附加第三列作为进一步描述。

例如

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

所以我正在寻找最简单的绘图方式，尽可能全屏，尽可能少（最少 LOC）。

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

而且我不明白为什么在图的右边有这些空值标签： http://s.natalian.org/2015-06-16/1434449447_1054x1058.png

还有什么技巧可以让 http://s.natalian.org/2015-06-16/foo.html 缩放以填满整个屏幕？我特别想让它在我的 iPhone.

上可用

Answer 1

如果我没理解错的话，你想添加第三列作为对每个点的描述。

如果你像这样添加第 3 列

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

Google 图表将此视为另一个系列，因为数据是字符串，所以无法绘制系列并显示为空。

您可以添加第 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>

Answer 2

I have not figured how to show the description (is it a infobox/selection? not sure on terminology)

在网络开发中，这称为工具提示。在 Google 图表中，您可以通过将注释行替换为以下行来添加工具提示：

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

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

Furthermore I don't understand why on the right of the graph there are these null value labels

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

And any tips to make .. scale to fill the whole screen ?

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

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中，你可以找到一个最终的工作版本
（进行了更多修复，例如水平轴范围和图例定位）。

Simplest annotated line chart