Google visualization 最简单注释折线图

这是因为我没有收到任何回复，所以我在这里询问

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

例如

因此，我正在寻找一种最简单的绘制方法，尽可能全屏幕，尽可能少（最少LOC）

到目前为止，我还没有弄清楚如何显示描述（它是一个信息框/选择？术语上不确定），在我的示例中，当我单击一个点时，它是内核版本

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

---

还有什么小技巧可以让整个屏幕都有刻度？我特别想让它在我的iPhone上可用。

如果我理解正确，您希望添加第三列作为对每一点的描述

如果你像这样添加第三列

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

GoogleChart将此作为另一个系列，因为数据是字符串，所以无法绘制该系列并显示空值

可以添加第三列作为工具提示

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>

我还没有弄清楚如何显示描述（它是一个信息框/选择？不确定术语）

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

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

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

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

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

显示空值是因为（如前所述），您插入了两个数据系列（“日期”和“内核”）。如果进行前面提到的替换，将替换空值

还有要做的任何提示。。缩放以填充整个屏幕

您可以添加以下选项来配置图表的维度：

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

此外，由于您正在使用的折线图版本有点过时，您应该替换它

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

与

---

在以下内容中，您可以找到最终工作版本

---

（还有一些修正，如水平轴范围和图例定位）。

我需要在工具提示中显示日期和编号值，每行设置一个，第三行为工具提示字符串。我该怎么做？focusTarget:“类别”不显示数值（第2列）。Google图表不提供格式化工具提示元素的功能。因此，您必须创建一个列，其中描述与日期和编号连接在一起，以便它们都显示在同一行中。否则，您将不得不使用香草Javascript手动编辑DOM（这相当“危险”）。

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