使用任何Javascript图表库，是否可以在某些X上显示不透明度的数据？

-2

使用谷歌图表，我试图显示一个线条图，它会显示一条线，它可以在某个X轴上显示多条线，每条线都带有不透明度：0.5。使用任何Javascript图表库，是否可以在某些X上显示不透明度的数据？

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

其背后的主要思想是为线图显示未来数据的投影。到现在为止的所有数据都是确定的，所以它们不会改变，但在“今天”之后，我们将根据不同的估计显示3条不同的线。

到目前为止，我来到了这个结果（https://jsfiddle.net/7nk1odsy/）使用谷歌图表：

google.charts.load('current', {'packages':['corechart']}); 
google.charts.setOnLoadCallback(drawChart); 

function drawChart() { 
    var data = google.visualization.arrayToDataTable([ 
    ['Year', 'Sales', { "type": "string", "role": "style" }, 'Forecast 1', { "type": "string", "role": "style" }, 'Forecast 2', { "type": "string", "role": "style" }], 
    ['2004', 1000, 'opacity: 1;',  null, 'opacity: 1;',  null, 'opacity: 1;'], 
    ['2005', 1170, 'opacity: 1;',  null, 'opacity: 1;',  null, 'opacity: 1;'], 
    ['2006', 660, 'opacity: 1;',  660, 'opacity: 0;',  660, 'opacity: 0;'], 
    ['2007', null, 'opacity: .3;',  540, 'opacity: .3;',  720, 'opacity: .3;'] 
    ]); 

    var options = { 
    title: 'Company Performance', 
    legend: { position: 'bottom' }, 
    dataOpacity: 0.5 
    }; 

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

    chart.draw(data, options); 
}

但徘徊线的时候它缺少透明度的变化为1，理想情况下，改变了全线（甚至第一线），使它看起来像是一个完整的线。

我该怎么做？

来源

2017-02-20 Cyril N.

是的。并通过编程。 – Shilly

哇，SO社区每天都在变得更好！ –

你有16k代表，你应该知道，如果你根本不显示任何代码，甚至没有一个数据样本来处理，你的问题将得不到答案。 – Shilly

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

来源

2017-02-20 15:45:38 redstylee

感谢您的留言。我只知道D3的名字（从来没有直接测试过）。我希望找到一个像ChartJS或Google Chart这样的好图书馆，这些图书馆已经能够提供我一直在寻找的东西。 –

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）深入了解线条图的注释选项等。

我试过一些变化，但还没有找到确切的解决方案。

https://developers.google.com/chart/interactive/docs/gallery/linechart#configuration-options

X）可以想像，我们可以通过具有CSS颜色线条的透明度，将所有上述情况，则也有上线鼠标悬停处理程序，将抓住正确的圈，然后手动在圆上触发鼠标悬停，这样我们就可以使用注释选项触发我们可以做出的更改。

除非有一些绘制选项，我错过了，这是我唯一的atm想法，以确切地得到OP descibes。

来源

2017-02-20 16:52:53 Shilly

谢谢您的深度搜索。正如你所看到的，找到一个可行的解决方案并不容易，这就是为什么我认为StackOverflow是最适合寻求这种帮助的地方。我的错误是给图书馆的选择权。我会看到你的答案，并回到你身边:) –

为了您的信息，使用您的答案作为基地，我能够重现此代码：https：//jsfiddle.net/7nk1odsy/2/。从我的角度来看，它在盘旋红色/橙色的时候缺少了“发光”蓝线的可能性，如果我为“预测”列添加值而不是空值，那么蓝线将采用这些值而不是“销售“栏（当悬停点时）。 –

使用任何Javascript图表库，是否可以在某些X上显示不透明度的数据？

回答

相关问题