最简单的带注释的折线图 [英] Simplest annotated line chart

问题描述

这是最初在Google网上论坛上问到的，但由于我没有收到任何回复，因此我想在这里提问.

this was originally asked on Google groups but since I received no replies, I'm asking here on SO.

我正在绘制基本数据，例如温度，各种计数以及日期时间，我想在第三列做进一步说明.

I am plotting basic data like temperature, various counts and such with date time and I like to append a third column as a further description.

例如

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

因此，我正在寻找一种最简单的绘制方式，即尽可能在整个屏幕上以最小的显示(最小LOC)进行绘制.

So I am looking at the simplest way of plotting that, as full screen as possible, as minimally (least LOC) as possible.

到目前为止， https://jsfiddle.net/kaihendry/q1mczqc1/2/我没有弄清楚如何显示描述(是否是信息框/选择?对术语不确定)，当我单击一个点时，在我的示例中是内核版本.

So far with https://jsfiddle.net/kaihendry/q1mczqc1/2/ I have not figured how to show the description (is it a infobox/selection? not sure on terminology), which in my example is the kernel version, when I click a point.

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

Furthermore I don't understand why on the right of the graph there are these null value labels: http://s.natalian.org/2015-06-16/1434449447_1054x1058.png

以及制作 http://s.natalian.org/2015的任何提示-06-16/foo.html 缩放以填满整个屏幕吗?我特别想使其在iPhone上可用.

And any tips to make http://s.natalian.org/2015-06-16/foo.html scale to fill the whole screen? I especially want to make it usable on my iPhone.

推荐答案

我还没有弄清楚如何显示说明(这是一个信息框/选择吗?不确定用术语表示)

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

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

In web development, this is called a tooltip. In Google charts, you can add a tooltip by replacing the commented line with the following one :

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

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

So, the 3rd column will not be handled as a data series, but as a tooltip.

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

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

显示空值，因为(如前所述)您已插入2系列数据(日期"和内核").如果您进行了前面提到的替换，则将替换空值

The null values are shown, because (as previously stated), you have inserted 2 series of data ('Date' and 'kernel'). If you make the replacement mentioned before, the null values will be replaced

还有任何使..缩放以填满整个屏幕的提示吗?

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

您可以添加以下选项来配置统计图的尺寸:

You can add the following option to configure the dimensions of the chart :

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

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

Furthermore, since the version of line charts you are using are slightly obsolete, you shoud replace

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

使用

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

---

在下面的 jsfiddle 中，您可以找到最终的工作版本
(还有一些其他修正，例如水平轴范围和图例定位).

---

In the following jsfiddle, you can find a final working version
(with some more fixes, like horizontal axis range and legend positioning).

这篇关于最简单的带注释的折线图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！