javascript - Google Chart - 调暗除鼠标悬停的系列之外的所有其他系列

Question

我正在使用谷歌图表来绘制图表。我是 UI 开发和 javascript 领域的新手。我在互联网上查看并设法开始绘制图表。我需要执行以下操作

1) 我有一个包含 9 个系列的折线图。当我将鼠标悬停在任何一个系列上时，我喜欢其他系列变暗

2)当我将鼠标移开时，图表应该恢复原来的样子。

我主要找到了 highcarts 的例子。我正在努力为谷歌图表实现类似的东西。我可以请求帮助来实现这个吗？

这是我绘制图表的代码。

        <script type="text/javascript">
            window.onresize = function(){
                startDrawingChart();
            };

            window.onload = function(){
                startDrawingChart();
            };

             startDrawingChart = function(){
                // Load the Visualization API AND the piechart package.
                google.load("visualization", "1", {packages:["corechart"],callback: drawChart});

                function drawChart() {
                    // Create our data table out of JSON data loaded FROM server.
                    var data_1 = google.visualization.arrayToDataTable([<?php echo (implode(",", $array_0)); ?>]);


                    var options_line = {
                        chartArea: {
                            left: 70,
                            top: 61,
                            width: '95%',
                            height: '60%'
                        },
                        curveType: 'function',
                        //width: 1600,
                        height: 400,
                        pointSize: 4,
                        lineWidth: 2,
                        visibleInLegend: false,
                        vAxis: {
                            //title: "GC#",
                            //logScale: true,
                            titleTextStyle: {
                                color: 'black'
                            }
                        },
                        hAxis: {
                            title: "TIMELINE",
                            titleTextStyle: {
                                bold: false,
                                color: 'black'
                            }
                        },
                        legend: {
                            position: 'top',
                            alignment: 'center',
                            textStyle: {
                                color: 'blue'
                            },
                            is3D: true
                        },
                        series: {5: {type: "line"}},
                    };

{position: 'top', alignment: 'center'},
                        bar: {groupWidth: '3%'},
                        is3D: true
                    };

                    var chart_1 = new google.visualization.ComboChart(document.getElementById('plot1'));
                    chart_1.draw(data_1, options_line);
                }
            };
        </script>

Answer 1

如果您单击图表，这很容易。只需使用 select 事件并将所有其他系列的颜色更改为较浅的色调。如果您有兴趣，我可能会围绕此写一个答案，但您的问题指定了悬停。

您可以使用 CSS 选择器，例如 this completely different situation ，但是直接用 CSS 编写会非常复杂。我真的不知道 LESS、SASS、SCSS 或 COMPASS 是否能够说这些工具是否会让事情变得更容易，但它们可能会。

我会采取在整个事物上放置一个悬停选择器的方法，以更改构成所有系列的 SVG 元素的颜色，然后编写一个更具体的规则，将悬停的系列设置回正常状态。

根据我的经验，对未作为图表功能实现的 Google 图表进行视觉更改是很困难的，因为它们不会在任何内容上放置任何 id 或类。因此，您可以使用 CSS 或 jQuery 选择器来尝试查找图表的各个部分 - 使用颜色似乎是区分系列之间的 SVG 元素的有效方法 - 但您可能会得到误报或错过动态元素图表。始终不同使得它们难以测试。