Question

使用谷歌图表，我试图显示一条线图，该线图将显示一条线，在某个X轴上可以显示多条线，每条线都有不透明度：0.5。

当客户将鼠标悬停在特定行上时，此行变为不透明度：1，提供反馈，即用户正在查看的行。

其背后的主要思想是用于显示未来数据预测的折线图。到目前为止，所有数据都是确定的，因此它们不会发生变化，但在今天＆＃34;之后，我们将根据不同的估算显示3条不同的线。

到目前为止，我使用Google Charts来了解此结果（https://jsfiddle.net/7nk1odsy/）：

'warn'

但是当它悬停在线上时，它忽略了不透明度变为1，理想情况下，改变整行（甚至是第一行）使它看起来像是一整行。

我该怎么做？

Answer 1

1）尚未找到确切的解决方案，但以下内容可以帮助您。

我们可以使用css定位svg的片段，因此我们可以使用悬停效果为线条着色。棘手的部分是获得正确的元素。唉，圆形弹出框和路径不在同一个容器中，因此导航很难。

如果圆圈是目标，那么circle.parentNode.parentNode.previousSibling会为您提供包含该行的<g>元素包装。从那里开始，它是第x个孩子，x是圆圈的子索引。

这种方式在技术上可以导航到正确的行并重新设置它。因此，一种可能性是将鼠标悬停处理程序添加到行/圆并从那里导航到另一个。

2）css部分：

/* svg > g > g > g > path  (exact path) */
svg path:hover {
    stroke-opacity: 1;
}

如果使用鼠标悬停线条，则会将线条的不透明度设置为1。棘手的部分是再次进入圆形端点。但是这可以通过draw函数中使用的选项对象来解决。

3）深入了解注释选项，例如折线图。

我尝试了一些变化，但尚未找到确切的解决方案。

x）假设我们可以通过使css颜色为线的不透明度来组合上述所有内容，然后在线上也有一个鼠标悬停处理程序，它将获取正确的圆，然后手动触发鼠标悬停在圈，所以我们可以使用注释选项触发我们可以进行的更改。

除非我错过了一些抽奖选项，否则这是我唯一的想法，可以准确地获得OP所描述的内容。

Answer 2

如果你有时间学习D3（数据驱动文档）。它是一个非常强大的开源免费图表库。在过去的几个月里，我一直在使用它，它可以做你所要求的。这是homepage。如果您只是制作折线图或多个折线图，那么完成此操作不会花费太长时间。这是我用来学习基础知识的free book。